SVG Format
SVG in Webseiten

SVG-Dateien in Webseiten einbinden

Auf dieser Seite erkläre ich die Möglichkeiten der Einbindung einer SVG-Datei und demonstriere sie auch gleich praktisch mit Hilfe des moziloCMS.

Es gibt mittlerweile 5 unterschiedliche Möglichkeiten, um eine SVG-Datei in eine herkömmlich Webseite einzubinden:

  • direkt als src-Attribut eines img-Tags
  • mit Hilfe des iframe-Tags, auch hier wird die SVG-Datei als scr-Attribut angegeben
  • über CSS-Anweisungen als Hintergrundbild
  • mit Hilfe eines Object-Tags
  • direkt im HTML-Code

Diese fünf Methoden haben jeweils unterschiedlich Vorteile und Nachteile und sie werden in unterschiedlichem Maße von den einzelnen Browserfamilien unterstützt.

Einbindung einer SVG-Datei als src-attribut eines img-Tags

Der Quellcode für dieses Verfahren ist trivial:
<img src="beispielbild.svg" alt="SVG Beispielbild" title"SVG Beispielbild" width="xxx" height="yyy">

Das sieht dann so aus:

SVG Beispielbild

Wenn man das gleiche Bild entsprechend den Voreinstellungen dieses CSS und mit dem CMS-Syntax einbindet, so wie es gleich auf die für Beiträge nutzbare Breite skaliert. Man sieht sehr gut, dass bei der Vergrößerung kein Qualitätsverlust eintritt.


Bild "SVG Format:beispiel-einbindung-01.svg"

Der Vorteil dieser Methode dürfte sein, dass viele CMS in ihren Beitragseditoren das img-Tag unterstützten. Allerdings kann man mit diesem Syntax keine spezifischen Manipulationen an der SVG-Datei (z.B. mit JavaScript) vornehmen und es werden auch keine SVG-internen Links unterstützt.

Einbindung einer SVG-Datei mit Hilfe des iframe-Tags

Der Quellcode für die Einbindung mit Hilfe von iframe sieht modellhaft so aus

<iframe height="180" width="100%" style="border:0;" src="beispielbild.svg" scrolling="no">

Im Unterschied zum Einfügen mittels img-Tag wird bei iframe die Grafik nicht skaliert, sondern abgeschnitten. Dafür sind bei dieser Methode die in die SVG-Datei eingefügten Links aktiv. Auch JavaScript wird bei dieser Methode ausgeführt.

Einbindung einer SVG-Datei als Hintergrundbild mit Hilfe einer CSS-Anweisung

Der CSS-Code für diese Methode könnte so aussehen:
.mitsvgbackground{
background-image:url(beispielbild.svg);
height:100px;
width:200px;
}

und HTML ganz einfach:

<div class="mitsvgbackground"></div>

Das Beispiel wird nicht korrekt angezeigt

Diese Form der Einbindung dürfte wohl ein selten genutzer Fall sein

Einbindung einer SVG-Datei mit Hilfe des Object-Tags

Ein Beispielcode sieht so aus

<object data="beispielbild.svg" type="image/svg+xml">
<img src="beispielbild.png" alt="SVG Beispielbild als PNG für IE8 und älter" title="SVG Beispielbild als PNG für IE8 und älter" width="xxx" height="yyy">
</object>

Wie man erkennen kann, wurde innerhalb des object-Tags mit einem img-Tag noch eine PNG-Grafik eingebunden. Diese wird in den älteren Browsern, allen voran der IE8, als Ersatz angezeigt.

SVG Beispielbild als PNG für IE8 und älter

Einbindung des SVG-Codes direkt im HTML-Code

Hier wird nun also der SVG-Code direkt in die HTML-Datei eingefügt. Dadurch wird natürlich die HTML-Datei größer und unter Umständen unübersichtlicher. Andererseits entältt das nachladen einer weiteren Datei. Außerdem ist auch bei dieser Variante der im SVG-Code enthaltene Link wirksam.Das Grundgerüst eines Beispielcodes sieht so aus:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
<title>Layer 1</title>
<rect id="svg_1" height="70" width="91" y="87" x="84" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

Dieser SVG-Code zeichnet ein einfaches rotes Rechteck mit schwarzer Umrandung. Der Code für das hier folgende Beispiel ist viel umfangreicher. Ich habe aus gründen der Übersichtlichkeit darauf verzichtet, ihn hier einzufügen.

image/svg+xml
siehe http://www.mediaevent.de/2012/11/svg-in-html-seiten/