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.
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 <object>
allora avrai il fallback raster gratis*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Beh, non proprio gratis, perché alcuni browser scaricano entrambe le risorse, vedi il suggerimento di Larry qui sotto per come aggirarlo.
Aggiornamento 2014:
<img>
con script fallback
alla versione png (per i vecchi IE e android < 3). Un modo semplice e pulito
modo per farlo:<img src="your.svg" onerror="this.src='your.png'"
.
Questo si comporterà come un'immagine GIF, e se il tuo browser supporta le animazioni dichiarative (SMIL) allora queste verranno riprodotte.
Se vuoi un svg interattivo, usa o <iframe>
o <object>
.
Se hai bisogno di fornire ai vecchi browser la possibilità di usare un plugin svg, allora usa <embed>
.
Per svg in css background-image
e proprietà simili, modernizr è una scelta per passare a immagini fallback, un'altra è dipendere da più sfondi per farlo automaticamente:
div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
Nota: la strategia degli sfondi multipli non funziona su Android 2.3 perché supporta gli sfondi multipli ma non svg.
Un'ulteriore buona lettura è questo blogpost sui fallback svg.
Da IE9 in poi puoi usare SVG in un normale tag IMG.
<img src="/static/image.svg">
<object>
e <embed>
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
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
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>
rect.setAttribute("fill", "green");
});