O SVG suporta a incorporação de imagens de bitmap?

147

Uma imagem SVG é puramente vetorial ou podemos combinar imagens de bitmap em uma imagem SVG? E as transformações aplicadas nas imagens de bitmap (perspectiva, mapeamentos etc.)?

Editar : as imagens podem ser incluídas em um SVG por referência de link. Consulte http://www.w3.org/TR/SVG/struct.html#ImageElement . Minha pergunta era, de fato, se imagens de bitmap podem ser incluídas dentro do svg, para que a imagem svg seja independente. Caso contrário, sempre que a imagem svg for exibida, o link deverá ser seguido e a imagem baixada. Aparentemente, os arquivos .svg são simplesmente arquivos xml.

image svg bitmapimage chmike
fonte

Respostas:

207

Sim, você pode fazer referência a qualquer imagem do <image>elemento. E você pode usar uri de dados para tornar o svg totalmente independente. Um exemplo:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Nos pontos é onde você adicionaria os dados codificados base64, os editores de gráficos vetoriais que suportam svg geralmente têm uma opção para salvar com imagens incorporadas. Caso contrário, existem várias ferramentas para codificação de e para base64.

Aqui está um exemplo completo do svg testsuite.

Erik Dahlström
fonte
2
@ Aleksandar é uma pergunta separada, e tenho certeza de que você pode encontrar uma resposta para ela neste site (codificar algo para base64 não é específico para svg).
Erik Dahlström
1
@ Erik - Suponha que eu tenha a mesma imagem repetida mil vezes no mesmo arquivo svg. Posso colocar os dados base64 em um único local e permitir que a imagem se refira a esses dados a partir daí?
Rohit Cubas
3
@Erik - Não importa, eu tenho a minha resposta daqui - stackoverflow.com/questions/16685014/… . A resposta fala sobre agrupar lá. :)
Rohit Vats
3
Não se esqueça de declarar o namespace xlinkcomo é: xmlns:xlink="http://www.w3.org/1999/xlink"algum navegador / espectador não pode ver a sua imagem sem ele
Marc_Alx
1
FYI: de acordo com a minha experiência, o navegador Chrome exibe esta imagem mesmo se você não especificar widthe heightna tag svg image. No entanto, o Firefox e o IE não exibem a imagem se você omitir esses atributos. Portanto, certifique-se de especificá-los!
Stonecrusher
23

Publiquei um violino aqui, mostrando dados, imagens remotas e locais incorporadas no SVG, dentro de uma página HTML:

http://jsfiddle.net/MxHPq/

<!DOCTYPE html>
<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
    <style>

        body{
            background-color:#999;
            color:#666;
            padding:10px;
        }

        h1{
            font-weight:normal;
            font-size:24px;
            margin-top:20px;
            color:#000;
        }

        h2{
            font-weight:normal;
            font-size:20px;
            margin-top:20px;
        }

        p{
            color:#FFF;
            }

        svg{
            margin:20px;
            display:block;
            height:100px;
        }

    </style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
    <p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

    <h2>Example 1: Embedded data</h2>
    <svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    </svg>

    <h2>Example 2: Remote image</h2>
    <svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
    </svg>

    <h2>Example 3: Local image</h2>
    <svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
    </svg>


</body>
</html>
davestewart
fonte
17

Você pode usar um URI de dados para fornecer os dados da imagem, por exemplo:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

</svg>

A imagem passará por todas as transformações normais do svg.

Mas essa técnica tem desvantagens, por exemplo, a imagem não será armazenada em cache pelo navegador

GarethOwen
fonte
se o SVG de dados é exigido pelo SVG, isso provavelmente não é uma desvantagem
editarei
Imagens incorporadas (URIs de dados) serão armazenados em cache com o documento que estão dentro, ver, por exemplo stackoverflow.com/questions/4791807/data-uris-and-caching
Erik Dahlström
Exatamente - se o documento svg mudar, o bitmap incorporado será recarregado, mesmo quando for o mesmo. Se vincularmos a um URL http, ele poderá ser armazenado em cache separadamente no documento svg.
precisa saber é o seguinte
1
Bom ponto. No meu comentário à resposta de Nick, você verá o racional de incorporar a imagem de bitmap na imagem svg. Embora você esteja certo, a codificação é ruim e ineficiente. Deve ser um arquivo binário codificado separado movido junto com a imagem svg.
chmike
2

Você pode usar um data:URL para incorporar uma versão codificada em Base64 de uma imagem. Mas não é muito eficiente e não recomendaria incorporar imagens grandes. Algum motivo para vincular a outro arquivo não é viável?

usuario
fonte
Depende do caso de uso. O caso de uso que estou considerando é onde um arquivo svg é copiado e o acesso à Internet nem sempre está disponível (por exemplo, cartão de visita). A TI também permite manter o uso do cartão privado. Com uma imagem vinculada, o proprietário da imagem pode rastrear todas as exibições de seus cartões, o que pode ser interessante para ele, mas não para o titular do cartão. Imagem svg independente faz sentido.
chmike
Isso é verdade se você usar um URL absoluto apontando para algum lugar da Internet. Mas é fácil usar um URL relativo para que, se o arquivo SVG for local, a imagem também seja. Se você também tem o requisito de que seja um único arquivo redistribuível, isso muda as coisas novamente.
Nick
Existem casos de uso nos quais você deseja que um gráfico SVG seja independente - ou seja, UM arquivo que contenha toda a imagem. Ter que transportar / armazenar vários arquivos para garantir que uma imagem seja renderizada não é uma coisa boa ao lidar com imagens em sistemas de arquivos - as coisas podem ficar fora de sincronia ou cair com muita facilidade.
Minok
-1

Também é possível incluir bitmaps. Eu acho que você também pode usar transformações nisso.

arado poderoso
fonte
De fato. Acabei de encontrar este link: w3.org/TR/SVG/struct.html#ImageElement . Infelizmente, isso não responde à minha preocupação, que notei que não está declarada na pergunta. Vou editar a pergunta.
chmike