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.
- SVG mit dem object-Tag einbinden,
- SVG im src-Attribut des img-Tags einsetzen,
- SVG direkt in das HTML-Markup schreiben,
- als Hintergrundbild via CSS einsetzen,
- via iframe einsetzen,
- SVG als data-URI in CSS
- 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.
<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.
