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(/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.

SVG als Element im Quellcode

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

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