SVG-Grafiken in Websites/HTML-Seiten einbinden

Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

SVG inline einbinden

Wenn ihr SVG-Grafiken exportiert, steht euch das Dateiformat *.svg oder der SVG-Code zur Verfügung. Der SVG-Code kann direkt in den HTML-Code der Website eingebettet werden.

<svg>
  <!-- hier folgt der Code -->
</svg>

Vorteile

  • Es wird keine externe Datei geladen
  • Animationen und Manipulationen mittels CSS oder JavaScript sind problemlos möglich
  • Verlinkungen innerhalb der SVG sind möglich

Nachteile

  • Der HTML-Code wird aufgebläht und ist unübersichtlich
  • Fehler im SVG-Code haben ggf. Auswirkungen auf die Website

Einbindung als image

Wenn die SVG-Grafik als Datei vorliegt, kann sie auch mittels <img>-Tag in die Website eingebunden werden.

<img src="kulturbanause-logo.svg">

Vorteile

  • Unkomplizierte und bekannte Handhabung
  • Breakpoints in der SVG funktionieren

Nachteile

  • Keine Möglichkeit der Manipulation mittels JavaScript oder CSS außerhalb der Datei
  • JavaScript und Links funktionieren nicht mehr
  • Animationen werden nicht in allen Browsern ausgeführt

Einbindung als background-image

Wie alle anderen Grafikformate auch, sind SVGs als CSS Hintergrundbild möglich.

.site-logo {
  height:200px;
  width:200px;
  background:url(kulturbanause-logo.svg) 50% 50% no-repeat;
}

Vorteile

  • Bekannte Handhabung

Nachteile

  • Keine Möglichkeit der Manipulation mittels JavaScript oder CSS außerhalb der Datei
  • JavaScript und Links funktionieren nicht mehr

Einbindung als object

Mittels <object>-Tag von HTML kann SVG ebenfalls integriert werden. Der Vorteil dieser Methode besteht darin, dass ein Fallback gebaut werden kann.

<object type="image/svg+xml" data="kulturbanause-logo.svg">
  <!-- fallback -->
  <img src="kulturbanause-logo.png" alt="">
</object>

Vorteile

  • Automatischer Fallback möglich
  • Links funktionieren in der SVG
  • JavaScript in der SVG funktioniert

Nachteile

  • Möglicherweise komplizierte Integration im CMS, da der <object>-Tag oft nicht unterstützt wird

Einbindung als embed

Auch der <embed>-Tag von HTML kann zur Integration von SVG verwendet werden.

<embed src="kulturbanause.svg" height="200" width="400"> 

Einbindung als iframe

Das <iframe>-Element von HTML kann ebenfalls genutzt werden um SVGs in die Website zu integrieren.

<iframe height="200" width="400" src="kulturbanause.svg" scrolling="no">
 <!-- fallback -->
 <img src="kulturbanause.png" width="400" height="200" alt />
</iframe>

Vorteile

  • Links in der SVG funktionieren
  • JavaScript in der SVG funktioniert
  • Domainübergreifend einsetzbar

Nachteile

  • Responsive Design und <iframe> sind aufwändig

Kodierung in Base64

SVG-Grafiken können auch in Base64 kodiert in eine Website integriert werden. Dabei wird die Datei mit Hilfe eines Tools in eine DataUri umgewandelt. Diese Zeichenkette kann anschließend wie eine normale SVG in die HTML-Seite integriert werden. Es handelt sich hierbei also nicht um eine zusätzliche Art der Einbindung, sondern um eine alternative »Darstellung« für den Bildpfad. Die Möglichkeiten der Animation und Interaktivität sind folglich abhängig von der gewählten Art der Einbindung.

<img src="data:image/svg+xml;base64,PHN2ZyB4bW … c3ZnPg==" />

Vorteile

  • Kein zusätzlicher HTTP-Request notwendig

Nachteile

  • Es entstehen etwas größere Dateien
  • Der Quellcode wird ggf. unübersichtlich

Browser-Support

Die folgende Tabelle gibt eine grobe Übersicht über die Browser-Kompatibilität. Wenn euch interessiert welche Art der Interaktion oder Animation in den verschiedenen Browsern in Abhängigkeit zur Art der Einbindung funktioniert, schau euch auch diesen Artikel an: SVG-Browsersupport für Animationen und Interaktionen

Browser SVG als img SVG als background-image Inline SVG
Safari (alle Versionen) ja ja 5+
Chrome (alle Versionen) ja ja ja
Firefox (alle Versionen) ja ja ja
Opera (alle Versionen) ja ja 11.6+
Internet Explorer 9+ 9+ 9+
Alle iOS Browser ja ja 5.1+
Android Browser (bevor Chrome der standard Android Browser wurde) 3+ 3+ 3+
Chrome für Android ja ja ja
Firefox für Android ja ja ja
Opera Mini ja ja nein
Opera Mobile ja ja 12+
IE Mobile ja ja ja