Sieben Wege, SVG in HTML-Seiten zu setzen

SVG als Standalone ist klasse. Der Clou von SVG ist, dass es sich als Komponente in die wohlbekannten Techniken des Webdesigns integrieren läßt. 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