Devo utilizar <img>
, <object>
, ou <embed>
para carregar arquivos SVG em uma página de forma semelhante a carregar um jpg
, gif
ou png
?
Qual é o código para cada um para garantir que funciona o melhor possível? (I'estou vendo referências para incluir o mimetype ou apontando para os renderizadores SVG fallback na minha pesquisa e não vendo uma boa referência do estado da arte).
Suponha que eu estou verificando o suporte a SVG com Modernizr e caindo para trás (provavelmente fazendo uma substituição com um simples <img>
tag)por navegadores que não são compatíveis com SVG.
Eu posso recomendar o SVG Primer (publicado pelo W3C), que cobre este tópico: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
Se você utiliza <object>
, então você recebe o raster fallback de graça*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Bem, não é bem de graça, porque alguns navegadores baixam ambos os recursos, veja a sugestão de Larry's abaixo para saber como contornar isso.
2014 update:
<img>
com fallbacks de script
à versão png (para IE e androide < mais antigos; 3). Uma versão limpa e simples
maneira de fazer isso:<img src="seu.svg" onerror="this.src='seu.png'">
.
Isto irá comportar-se muito como uma imagem GIF, e se o seu browser suporta animações declarativas (SMIL) então estas serão reproduzidas.
Se você quiser um svg interativo, utilize <iframe>
ou <object>
.
Se você precisa fornecer aos navegadores mais antigos a capacidade de utilizar um plugin svg, então utilize <embed>
.
Para svg em css background-image
e propriedades similares, modernizr é uma opção para mudar para imagens fallback, outra depende de múltiplos fundos para fazê-lo automaticamente:
div {
imagem de fundo: url(fallback.png);
imagem-fundo: url(your.svg), nenhuma;
}
Note: a estratégia de múltiplos fundos não't funciona no Android 2.3 porque suporta múltiplos fundos mas não svg.
Uma boa leitura adicional é este post do blogue sobre as recuos do svg.
A partir do IE9 e acima pode usar o SVG numa etiqueta IMG comum.
<img src="/static/image.svg">
<object>
e <embed>
têm uma propriedade interessante: tornam possível obter uma referência a um documento SVG a partir de um documento externo (tendo em conta a política de origem). A referência pode então ser utilizada para animar o SVG, alterar as suas folhas de estilo, etc.
Dado
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
Você pode então fazer coisas como
document.getElementById("svg1").addEventListener("load", function() {
var doc = this.getSVGDocument();
var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
rect.setAttribute("fill", "green");
});