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.

SVG in HTML-Seiten

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 in img Tag laden
<img src="on-the-beach.svg" alt="SVG mit img 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 8 / Drupal 9 braucht ein Modul.

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">
   <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 und sie können die Struktur der Herbergsseite nicht durch Fehler erschüttern.

Nachteile

  • Ein responsives iframe war lange aufwändig und nicht intuitiv. Aber CSS aspect-ratio macht es jetzt einfacher.

Sowohl der WordPress-Editor als auch der Drupal 8/9-Editor setzen ein HTML-iframe ohne Widerstand.

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>

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 out of the box. Der WordPress-Editor muss in den Text-Modus geschaltet werden, der Drupal 8-Editor ersetzt das data-Attribut durch about:blank.

4. SVG als Hintergrundbild

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

 
<div style="background-image: url(pattern.svg);">
</div>

Vorteile

Passt sich an die Größe des Viewports an.

5. SVG direkt im HTML-Markup

<div class="svg">
    <svg width="100%" height="100%" viewBox="0 0 2287 1276">
    </svg>
</div>

Vorteile

  • Laden einer weiteren externen Datei entfällt.
  • Formen können mit Links versehen werden.
  • Kann mit Javascript animiert werden.

Nachteile

Bei größeren Grafiken wird das Markup verd… unübersichtlich und loading=lazy kann nicht eingesetzt werden.

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:

 
SVG Hintergrundbild »Horizontale farbige Linien«
.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.
SVG-Markup mit Javascript encode URI, decode URI kodieren: Sonderzeichen in URLs und Dateinamen 

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.

Externe Quellen

2024-02-12 SITEMAP BLOG