Einbindung von SVG

Auf verschiedene Weisen kann man SVG in eine Webseite einbinden. Also werde ich jeweils diese insgesamt sieben Methoden praktisch anwenden.

Okay fangen wir mit dem speziellen CSS für diese Seite erst mal an. svg,div,object,article img{width:200px;height:200px;margin:20px;}div#datei{background:url(http://joerghuelsermann.de/svg/button.php);}

Analog der Einbindung der Dateien kann man auch eine dataurl einbinden.

Jetzt im August 2011 gibt es meines Wissens keinen aktuellen Browser, der alle Methoden unterstützt und diese SVG Datei dazu noch einwandfrei darstellt.

Im Dezember 2012 habe ich einen Fehler in meinen Überlegungen erkannt und daraufhin festgestellt das doch alle Methoden von einigen Browsern unterstützt werden. Es ist aber nicht mehr nachvollziehbar seit wann alle Einbindungen unterstützt werden.

SVG als Element im Quellcode

Bei Einsatz von base Elementen ist eine Pfadangabe beim Bezug auf das id Attribut notwendig. Bei Browser die diese Technik nicht unterstützen spare ich mir die Ausgabe der Graphik.

SVG Datei als Object einbinden

<object data="/svg/button.php" type="image/svg+xml"></object>

SVG Datei als Bild einbinden

<img src="/svg/button.php" alt="Button" />

SVG Datei als Hintergrundbild durch CSS einbinden

Bei Einsatz einer dataurl sollte man darauf achten auch die Domain mit anzugeben.

<div id="datei"></div>

Und noch ein zweites Mal mit einem style Attribut statt mit einer Anweisung in einer dataurl.

SVG dataurl als Object einbinden

SVG dataurl als Bild einbinden

SVG dataurl als Hintergrundbild durch CSS einbinden

<div id="dataurl"></div>

Und noch ein zweites Mal mit einem style Attribut statt mit einer Anweisung in einer dataurl.