Scalable Vector Graphics oder kurz SVG, ist eine XML-basierte Spezifikation des W3C für zweidimensionale Vektorgrafiken aus dem Jahr 2001. Wie so oft brauchte es bis zur Durchsetzung der Technik lange Zeit. Heute wird SVG aber von allen modernen Browsern unterstützt, so dass wir diese Vektoren endlich zuverlässig und oft ohne Fallback nutzen können. Höchste Zeit also um aufzuzeigen, wie man SVG einbinden kann.

SVG mit IMG (Image-Tag) einbinden

Liegt eine SVG-Datei vor, kann die Grafik sehr einfach mit Hilfe des IMG-Tags in eine Webseite eingebunden werden. Die IMG-Syntax ist sehr vertraut und unkompliziert anwendbar. Allerdings kann der so eingebundene Vektor nicht mit JavaScript oder CSS manipuliert werden. Eingebettetes Javascript funktioniert nicht und viele Browser führen eine ggf. vorhandene SVG Animation nicht aus.

<figure><img src="vektor.svg" alt="SVG mit img-Tag laden" height="100" width="200"></figure>

Wenn img-Tags mit CSS für ein responsives Design definiert sind, wird auch die SVG-Grafik analog zu jpg oder png an die Bildschirmgröße angepasst.

Inline-SVG in HTML

Mit Hilfe des SVG-Tags kann der SVG-Quellcode auch direkt in das HTML eingebettet werden (inline):

<svg><!-- SVG-Quelltext kommt hierhin --></svg>

Es gibt keinen weiteren http-Request, da keine externe Datei geladen wird. Außerdem sind Manipulationen mit JavaScript und CSS möglich. Nachteilig ist definitiv das die HTML-Struktur unübersichtlicher wird und das Dateigewicht steigt.

Damit SVG das HTML-Markup nicht unlesbar macht, kann das komplette SVG-Markup am Ende einer Seite eingebunden werden. An der Stelle, wo der Vektor erscheinen soll, nutzt man ein sog. SVG Use-Element.

SVG als Hintergrundbild mit background-image einbinden

SVG-Dateien können analog zu allen anderen Grafikformaten mit CSS als Hintergrundbild eingefügt werden.

#background{
background:url('hintergrund.svg') 0 0 no-repeat;
}

Auch hier ist eine Manipulation des Vektors mit JavaScript oder CSS außerhalb der Datei nicht möglich. Zudem ist es ratsam die Größe des Bildes mit background-size zu definieren und damit das Bild zu skalieren.

background-size:300px 100px;

SVG als Object einfügen

Wenn ein Fallback für SVG benötigt wird, ist die Verwendung des Object-Tags vorteilhaft für das SVG einbinden. Links und JavaScript funktionieren erwartungsgemäß und ältere Browser geben das Fallback-Bild aus.

<object data="vektor.svg" type="image/svg+xml" height="150" width="300">
<figure><img src="bitmap.jpg" alt="SVG Fallback"></figure></object>

Die Editoren vieler Content Management Systeme unterstützen die Einbindung von object-Tags nicht. Bei WordPress muss der Editor beispielsweise in den Text-Modus geschaltet werden um object nutzen zu können.

Einbindung von SVG mit Embed

SVG kann auch mit dem -Tag in ein HTML eingebunden werden:

<embed src="vektor.svg" height="300" width="100">

SVG einbinden mit iFrame

Oder wie wäre es einen iFrame zum SVG einbinden zu benutzen? Auch hier gibt es die Möglichkeit eines Fallbacks. Zudem können Daten von anderen Domains geladen werden. Nur sind responsive Websites mit iFrames aufwändig:

<figure>
<iframe src="vektorsvg" scrolling="no" height="100" width="300">
<img src="bitmap.png" width="300" height="100" alt="SVG Fallback">
</iframe>
</figure>

SVG als data-URI integrieren

Mit sog. Data URIs, also komplexen Strings (Base 64 Code) lassen sich u.a. Grafiken erstellen. Der Base 64 Code kann als CSS-Hintergrundbild oder direkt mit dem IMG-Tag in HTML eingefügt werden. Es wird also keine externe Datei geladen und vermeidet so einen unnötigen HTTP-Request.

Einbindung als IMG:

<figure><img></figure>

Einbindung als Background-Image:

.svg_background{
    width:300px;
    height:100px;
    background:url("data:image/svg+xml;utf8,
    ") }

SVG einbinden mit picture-Element

Es soll nicht unerwähnt bleiben, dass SVGs auch mit dem HTML5-Tag picture ähnlich zu img und mit Fallback eingefügt werden können:

<picture>
    <source srcset="vektor.svg" type="image/svg+xml">
    <figure><img src="bitmap.jpg" alt="SVG Fallback"></figure>
</picture>

Browser, die den SVG-Mime-Typ oder die picture/source-Tags nicht unterstützen (IE8 zum Beispiel) geben direkt den IMG-Fallback aus.

SVG Browser-Support

Alle modernen Browser unterstützen SVG. Internet Explorer unterstützt SVG erst seit Version 8. Android Browser erst seit Version 3. Viele andere Webbrowser unterstützen das Format bereits seit 2008. Einzelheiten bietet die Seite CanIuse.com.

WordPress Unterstützung für SVG: Vektorgrafiken nutzen

Obwohl SVG weit verbreitet ist und sich dank hochauflösender Bildschirme und auf für Performance optimierten Webseiten großer Beliebtheit erfreut, verbietet die WordPress-Mediathek bislang den Upload.
Um WordPress den MIME-Typ von SVG hinzuzufügen, kann man das Plugin SVG Support nutzen.

Erfahrenere Benutzer können der WP-Mediathek durch Erweiterung der functions.php den MIME-Typ für SVG hinzufügen:

function add_svg_support($svg_mime){
    $svg_mime['svg'] = 'image/svg+xml';
    return $svg_mime;
}
add_filter('upload_mimes','add_svg_support');

*

Einführung und Geschichte von SVG bei Wikipedia.