Sieben Wege, SVG in HTML-Seiten zu setzen

Der Clou von SVG ist das nahtlose Einbetten von SVG-Grafiken ins HTML der Webseite und die Nähe zu den bewährten Techniken des Webdesigns. Wir können SVG inline in HTML einbetten, mit einem HTML img-Tag laden oder als Hintergrundbild in CSS einsetzen.

Früher habe ich die Grafiken für Vorlesungen und Webseiten mit Photoshop angelegt und als PNG exportiert. Bei jeder Änderung muss das Original – sei es nun ein TIFF in Photoshop oder eine SVG-Grafik aus Inkscape oder Illustrator – wieder hervorgekramt und geändert werden. Dann die Grafik wieder als PNG oder GIF exportieren, erneut in die Webseite einbinden … das nervt …

SVG für Grafiken ist flexibler als GIF- oder PNG-Bilder, kann mit PHP dynamisch erzeugt werden (z.B. für Statistiken und Graphen) und erlaubt obendrein Links aus der Grafik. Und nicht zu vergessen: Javascript kann in die Grafik eingreifen und die Tortengrafik in Bewegung setzen, SVG kann mit CSS animiert werden und hat ein eigenes Animationsmodell.

  1. SVG mit dem object-Tag einbinden,
  2. SVG im src-Attribut des img-Tags einsetzen,
  3. SVG direkt in das HTML-Markup schreiben,
  4. als Hintergrundbild via CSS einsetzen,
  5. via iframe einsetzen,
  6. SVG als data-URI in CSS
  7. SVG im picture-Tag mit alternativem Bitmap-Bild

1. SVG im img-Tag

Ohne großen Aufwand wird eine einfache SVG-Grafik mit einem img-Tag in der Webseite angezeigt.

SVG mit img Tag laden
<img src="on-the-beach.svg" alt="SVG mit img Tag laden" width="600" height="350" >
  • Vorteile
    Das img-Tag bietet die bekannteste Syntax. Der WordPress-Editor setzt das SVG als img-Tag.
  • Wenn das img-Tag im CSS für ein responsives Design vorbereitet sind, wird die SVG-Grafik genauso an den Monitor angepasst wie jpg oder png.
  • Nachteile
    Links und Javascript in der SVG-Grafik werden nicht unterstützt. Der Image-Upload von Drupal 7 / Drupal 8 verweigert bei SVG.

2. SVG mit iframe in HTML

Natürlich gibt auch HTML iframe eine SVG-Grafik in der Webseite aus.

<iframe height="180" width="100%" src="dashboard.svg" scrolling="no">
   <p>SVG-Grafik – hier eine Kopie als PNG</p>
   <img src="dashboard.png" width="220" height="220" alt="Dashboard" />
</iframe>
  • Vorteile
    Genauso wie mit einem object-Tag stehen mit iframe die Links der SVG-Datei in der Webseite zur Verfügung.
  • Javascript wirkt ebenfalls, wenn SVG via iframe in die Webseite gesetzt wird.
  • iframes dürfen Cross-Domain (domainübergreifend) eingesetzt werden, vor allem aber können sie die Struktur der Herbergsseite nicht durch Fehler erschüttern.
  • Nachteile
  • Ein responsives iframe ist aufwändig und nicht intuitiv.

Sowohl der WordPress-Editor als auch der Drupal 8-Editor setzen ein HTML-iframe ohne Widerstand. Ein iframe muss in der Text-Ansicht (WordPress) oder Source/Quelltext-Ansicht (Drupal 8) eingefügt werden oder der Editor braucht eine Erweiterung.

3. SVG im object-Tag

<object data="fruity-icons.svg" type="image/svg+xml" width="600" height="193">
<!-- Für Browser ohne SVG-Unterstützung -->
<img src="fruity-icons.png" width="600" height="193" alt="Alternatives PNG-Bild">
</object>
Alternatives PNG-Bild
  • Vorteile
    Fallback durch Inhalt des object-Tags für IE: Ein alternatives Bild zwischen dem öffnenden und schließenden object-Tag kann die alten Versionen von IE abspeisen.
  • Formen können im SVG-Quelltext mit Links versehen werden.
  • Die SVG-Grafik kann mit Javascript animiert werden.
  • Nachteile
    Die Editoren der Content Management Systeme unterstützen das Einsetzen von object-Tags nicht unbedingt. Der WordPress-Editor muss in den Text-Modus geschaltet werden, der Drupal 8-Editor ersetzt das date-attribut durch about:blank.

4. SVG als Hintergrundbild

Ein SVG wird genauso wie ein Bitmap-Bild als background-image eingesetzt.

<div style="background: url(pattern.svg);">
</div>
  • Vorteil:
    Passt sich an die Größe des Viewports an und kann durch Conditional Comments mit einem akzeptablen Ersatz für alte Browser versehen werden.

5. SVG direkt im HTML-Markup

<div class="svg">
    <svg width="100%" height="100%" viewBox="0 0 2287 1276">
    </svg>
</div>
SVG inline in HTML-Seiten einbinden
  • Vorteile
    Laden einer weiteren externen Datei entfällt.
  • Formen können mit Links versehen werden
  • kann direkt mit Javascript und CSS animiert werden.
  • Nachteile
    Bei größeren Grafiken wird das Markup verd… unübersichtlich

Damit SVG inline das HTML-Markup nicht überschwemmt, kann das komplette SVG-Markup am Ende der Seite geparkt werden. Dort, wo die Grafik eingesetzt werden soll, holt sie ein einfaches SVG use-Element an Ort und Stelle.

6: SVG als data-URI im CSS

Tipp von Andreas unten in den Kommentaren, der das SVG so elegant aus dem HTML in seinem Apfelgame heraushält: SVG-Hintergrundbilder via Data URL direkt in die CSS-Datei einbinden. Das hält das HTML sauber und vermeidet einen weiteren HTTP-Request.

SVG als CSS background via data-URI:

.svgbg { width:100%; height:150px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' height='44' width='100'><path d='m 0,11 100,0' style='stroke:#efefef;stroke-width:21.5px' /></svg>") }

Nur dabei daran denken, in Data-URLs die Sonderzeichen < und > und insbesondere das ‚#‘ zu encodieren. Damit SVG als Data URL auch in Firefox und in Internet Explorer angezeigt wird, lautet der korrekte String also

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' height='44' width='100'%3E%3Cpath d='m 0,5.5 100,0' style='stroke:%23f5f5f5;stroke-width:11px' /%3E%3Cpath d='m 0,38.5 100,0' style='stroke:%23f5f5f5;stroke-width:11px' /%3E%3C/svg%3E");

UTF8 kann man sich sparen, weil das Dokument schon auf UTF8 basiert.

7: SVG im HTML picture-Element

Und dann hätten wir noch das HTML picture-Tag. picture für sich alleine ist leer, es entfaltet sich erst durch eine Liste von alternativen Bildformaten.

<picture>
    <source srcset="running.svg" type="image/svg+xml">
    <img src="running.png" alt="running rabbits" />
</picture>

Browser ohne Support für den Mime-Typ des Bildes oder denen die gesamten picture / source-Tags unbekannt sind (die letzten überlebenden IE8s) überspringen das source-Element und zeigen das Bild im img-Tag.

Das HTML picture-Tag teilt dem Browser Bilder und Grafiken in unterschiedlichen Formaten oder Seitenverhältnissen zu. Das img-Tag innerhalb des picture-Tags ist ein Fallback für Browser, die das picture-Tag noch nicht erkennen. Aber Browser ohne SVG-Support zählen heute zu den Raritäten.

SVG inline in HTML-Seiten einbinden