Uso , , o per i file SVG?

Dovrei usare <img>, <object>, o <embed> per caricare file SVG in una pagina in modo simile al caricamento di un jpg, gif o png?

Qual è il codice per ciascuno per garantire che funzioni al meglio? (I'm see references to including the mimetype or pointing to fallback SVG renderers in my research and not seeing a good state of the art reference).

Supponiamo che io stia controllando il supporto SVG con Modernizr e che stia tornando indietro (probabilmente facendo una sostituzione con un semplice tag <img>) per i browser che non supportano SVG.

artlung
Domanda modificata 10º settembre 2018 в 4:05
Programmazione
svg vector-graphics html
18º dicembre 2010 в 3:50
20 visualizzazioni
Soluzione

Posso raccomandare l'SVG Primer (pubblicato dal W3C), che copre questo argomento: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Se usi `` allora avrai il fallback raster gratis*:

*) Beh, non proprio gratis, perché alcuni browser scaricano entrambe le risorse, vedi il suggerimento di Larry qui sotto per come aggirarlo.

Aggiornamento 2014:

  • Se vuoi un svg non interattivo, usa `` con script fallback alla versione png (per i vecchi IE e android < 3). Un modo semplice e pulito modo per farlo:

`

Erik Dahlström
Risposta modificata 5º febbraio 2015 в 8:04
Commentari (24)

Da IE9 in poi puoi usare SVG in un normale tag IMG.

https://caniuse.com/svg-img

Volker E.
Risposta modificata 16º marzo 2018 в 3:21
Commentari (4)

e hanno una proprietà interessante: rendono possibile ottenere un riferimento al documento SVG da un documento esterno (tenendo conto della politica same-origin). Il riferimento può quindi essere utilizzato per animare l'SVG, cambiare i suoi fogli di stile, ecc.

Dato

Potete quindi fare cose come

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a 
    rect.setAttribute("fill", "green");
});
Commentari (5)