Eu uso , ou para ficheiros SVG?

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.

artlung
Pergunta editada :em
Programação
svg vector-graphics html
18º dezembro 2010 в 3:50
22 vistas
Solução

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 ``, então você recebe o raster fallback de graça*:

*) 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:

  • Se você quer um svg não interativo, utilize `` com fallbacks de script à versão png (para IE e androide &lt mais antigos; 3). Uma versão limpa e simples maneira de fazer isso:

``.

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 ``.

  • Se você precisa fornecer aos navegadores mais antigos a capacidade de utilizar um plugin svg, então utilize ``.

  • 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.

Erik Dahlström
Resposta editada :em
Comentários (24)

A partir do IE9 e acima pode usar o SVG numa etiqueta IMG comum.

https://caniuse.com/svg-img

Volker E.
Resposta editada :em
Comentários (4)

e 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

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.setAttribute("fill", "green");
});
Comentários (5)