Sollte ich <img>
, <object>
oder <embed>
verwenden, um SVG-Dateien in eine Seite zu laden, ähnlich wie beim Laden von jpg
, gif
oder png
?
Wie sieht der jeweilige Code aus, um sicherzustellen, dass er so gut wie möglich funktioniert? Ich habe bei meinen Recherchen Hinweise auf die Einbindung des Mimetyps oder Verweise auf Fallback-SVG-Renderer gefunden, aber keine gute Referenz zum Stand der Technik.
Ich gehe davon aus, dass ich mit Modernizr auf SVG-Unterstützung prüfe und bei nicht SVG-fähigen Browsern zurückgreife (wahrscheinlich durch ein einfaches <img>
-Tag ersetzt).
Ich kann die SVG-Fibel (veröffentlicht vom W3C) empfehlen, die dieses Thema behandelt: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
Wenn Sie <object>
verwenden, erhalten Sie Raster Fallback kostenlos*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Nun, nicht ganz kostenlos, denn einige Browser laden beide Ressourcen herunter, siehe Larry's Vorschlag unten, wie man das umgehen kann.
2014 Update:
<img>
mit Script Fallbacks
zur png-Version (für ältere IE und Android < 3). Eine saubere und einfache
Weg, das zu tun:<img src="your.svg" onerror="this.src='your.png'">
.
Dies verhält sich ähnlich wie ein GIF-Bild, und wenn Ihr Browser deklarative Animationen (SMIL) unterstützt, werden diese abgespielt.
Wenn Sie ein interaktives svg wollen, verwenden Sie entweder <iframe>
oder <object>
.
Wenn Sie älteren Browsern die Möglichkeit geben wollen, ein svg-Plugin zu verwenden, dann verwenden Sie <embed>
.
Für svg in css background-image
und ähnliche Eigenschaften ist modernizr eine Möglichkeit, zu Fallback-Bildern zu wechseln, eine andere ist, sich auf mehrere Hintergründe zu verlassen, um dies automatisch zu tun:
div {
background-image: url(fallback.png);
background-image: url(deine.svg), none;
}
Hinweis: die Strategie mit mehreren Hintergründen funktioniert nicht unter Android 2.3, da es zwar mehrere Hintergründe unterstützt, aber nicht svg.
Eine weitere gute Lektüre ist dieser Blogpost über svg Fallbacks.
Ab IE9 und höher können Sie SVG in einem normalen IMG-Tag verwenden.
<img src="/static/image.svg">
<object>
und <embed>
haben eine interessante Eigenschaft: sie ermöglichen es, einen Verweis auf ein SVG-Dokument aus einem äußeren Dokument zu erhalten (unter Berücksichtigung der Politik des gleichen Ursprungs). Diese Referenz kann dann verwendet werden, um das SVG zu animieren, seine Stylesheets zu ändern usw.
Gegeben
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
Sie können dann Dinge tun wie
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");
});