Jede Webseite sollte SVG (Scalable Vector Graphics) verwenden (haunschild.de tut es zum ersten mal in diesem Artikel, passenderweise in Form des SVG-Logos).
Viele andere Webseiten setzen SVG bereits seit Jahren ein. Die Technik ist robust und sinnvoll.
Vorab ein Aktualisierungshinweis
Nachdem ich mich eine Weile mit SVGs beschäftigt habe, würde ich die inline einbinden. Hier einige Links – alle auf CSS-Tricks von Chris Coyier – wie es geht, warum inline-SVGs (meistens) die beste Wahl sind und welche Probleme (samt Lösungen) es damit gibt:
- https://css-tricks.com/icon-fonts-vs-svg/
- https://css-tricks.com/inline-svg-best-svg/
- https://css-tricks.com/pretty-good-svg-icon-system/
- https://css-tricks.com/gotchas-on-getting-svg-into-production/
- https://css-tricks.com/gotchas-getting-inline-svg-production-part-ii/
Die Vorteile von SVG
- skalierbar und damit ideal für responsive Webseiten
- inklusiv und damit geeignet für zugängliche Webseiten
- effizient und damit geeignet für performante Webseiten
- veränderbar mittels CSS und damit wartbar und anpassbar an z.B. ein Redesign, Bildschirmgrößen, Farbschemata usw
- cachable – also vom Browser wiederverwendbar, ohne wiederkehrende http-Requests und zudem als Satz (Sprite) gruppierbar und als einzelne Datei speicherbar (ein http-Request für viele Icons/Bilder)
- wiederverwertbar auch vom Entwickler und damit DRY (don#t repeat yourself)
- einfach in der Anwendung mittels Image-Element (in HTML) oder als Hintergrund-Grafik (in CSS)
- einfach in der Erstellung mittels entsprechender Tools (z.B. Adobe Illustrator) und zahlreich kostenlos im Web verfügbar.
- einsteigerfreundlich und daher ohne hohen Lernaufwand verwendbar, aber
- mächtig, wenn man mit der Zeit das Format und die Syntax lernt
- Problemlöser für Gestaltungsaufgaben, bei denen CSS-Lösungen sehr umständlich oder unmöglich sind
- Browserunterstützung nahezu komplett für Basis-Funktionen, Filter und Effekte (can I use-Abfrage )
Nachteile / Überlegungen
Bezüglich der Möglichlkeiten, SVGs zwischenzuspeichern, gibt es je nach Art der Einbindung leider Einschränkungen.
Aufgrund einer mangelhaften Unterstützung von InternetExplorer, Edge und Chrome, müssen SVG-Sprites in die jeweiligen HTML-Dokumente eingebunden werden. Allerdings sind die Icons alle sehr klein (oft nur ein halbes KiloByte oder weniger).
Angesichts dieser geringen Datenmenge halte ich die Einbindung der Icons direkt in das HTML für die beste Lösung, zumal bei der Verwendung von Inline-SVGs auch nur solche Icons verwendet werden, die tatsächlich benötigt werden. Eine Vorauswahl bei Verwendung umfangreicher Icon Bibliotheken wie z.B. Font Awesome ist also nicht nötig. Man pickt sich einfach raus, was man benötigt. – Schön wäre ein WordPress-PlugIn für so was ;-)
SVG-Sprites
Bei Verwendung eines SVG-Sprites würden dagegen alle Icons in jedes Dokument eingebunden werden und stünden mittels use-Element für den Einsatz bereit.
Gestalterisch kann man dann über das Shadow-DOM per CSS Einfluss auf die Färbung nehmen. Das Shadow-DOM hat allerdings Nachteile gegenüber dem echten DOM.
Das würde sich aber nur auszahlen, wenn auf einer Seite deutlich mehr Icons verwendet würden, als im Sprite enthalten – sonst verursacht ist das Einbinden des Sprites mehr Traffic, als Inline-SVGs.
Inline-SVGs
Auf das Erstellen eines SVG-Sprites würde ich deshalb in den meisten Fällen verzichten und die SVGs inline einbinden. Dann müssen unbenötigte Icons nicht „mitgeschleppt“ werden.
Dadurch befinden sich die Icons dann auch im echten DOM und können entsprechend nativ über CSS gestaltet werden.
Die Einbindung in statische Seiten kann allerdings aufwändig sein und niemand wird später auf ein anderes Iconset wechseln wollen, weil dann alle Icons händisch auszutauschen wären.
Werden Icons über z.B. PHP-Funktionen eingebunden, müsste für jedes Icon nur eine Stelle im Code geändert werden. Das würde also auf jeden Fall Sinn machen!
SVG als Verweis aus einem img-Element
Alternativ wäre es möglich, die Icons mittels img-Element einzubinden, dadurch könnte der Browser sie im Cache speichern. Die zusätzlichen http-Requests dürften der Performanz in den meisten Fällen allerdings mehr schaden als das Caching nützt.
Icons im CSS hinterlegen (base64-codiert)
Weiter können die Icons auch im CSS base64-codiert hinterlegt werden. Dann wäre allerdings eine Verwendung im HTML ausgeschlossen, was der Zugänglichkeit abträglich wäre (z.B. keine Möglichkeit für textliche Alternativen).
Ob eine Gestaltung mittels CSS so überhaupt möglich wäre, kann ich nicht sagen.
Nach Abwägung der Vor- und Nachteile der verschiedenen Methoden halte ich Inline-SVGs in den meisten Fällen für die beste Methode.
Allerdings muss jeder für jeden Anwendungsfall die Vor- und Nachteile abwägen.
So richtig falsch machen kann man dabei aber nichts. Angesichts der geringen Dateigröße von SVGs sind all diese Überlegungen
Fallback
Wenn sehr alte Browser unterstützt werden müssen, gibt es Polyfills, die beispielsweise auf HTML5please.com vorgestellt werden oder eine JavaScript-Lösung, die sich SVGeezy nennt. Auch Modernizr kann selbstverständlich entsprechende Klassen je nach vorhandener Unterstützung ausgeben, auf die man z. B. bei der Verwendung von CSS-Hintergründen zurückgreifen kann. In der Regel sollte das aber nicht mehr nötig sein.
Vergleich von Icon Fonts und SVG
Auch im direkten Vergleich mit skalierbaren Icon-Fonts überwiegen die Vorteile von SVG
- Barrierefreiheit ist leichter zu berücksichtigen
- Die Ausrichtung (Positionierung) von SVGs ist einfacher als man das von Icon-Fonts kennt
- Es kann mehr als nur eine Farbe verändert werden, die einzelnen Bestandteile lassen sich darüber unabhängig voneinander skalieren, drehen und in jeder anderen Hinsicht gestalten
- die Formatierungen können mittels CSS und SVG-CSS vorgenommen werden, was noch weitergehende Gestaltungsmöglichkeiten eröffnet
Quellen für erste Schritte mit SVGs
- Sämtliche Artikel zum Thema auf css-tricks.com von Chris Coyier
- Das Buch „Practical SVG“ von Chris Coyier
- Einstieg in das Thema auf selfhtml.org (mehr Hilfe zum Thema im Self-Forum)
- Die offizielle Seite des W3C
- Webseite mit Beispielen und einem umfangreichen (kostenpflichtigen) Iconsatz
- Font Awesome – der Klassiker unter den Icon-Bibliotheken auch als SVG verfügbar (Version 5 derzeit noch als Crowd funding project)
- Ebenfalls kostenpflichtige, sehr beliebte Icons auf IcoMoon
- Noch mehr Icons, viele kostenlos bietet Noun Project
- Viele kostenlose SVG-Icons gibt es auch bei flat icons (neben anderen Formaten)
- Leonie Watson gibt im Smashing Magazine 8 Tipps, wie Sie SVGs für alle zugänglich machen
Eine weitere Hilfe für alle die tiefer einsteigen möchten is SnapSVG, eine Library für interaktive SVG-Animationen von Adobe.
Wer sich den Einstieg lieber erklären lassen möchte, statt zu lesen, kann sich den Vortrag von Chris Coyier (Link führt zu YouTube. YouTube erhebt Daten) anschauen.
WordPress und SVG
In die Medien-Bibliothek lassen sich SVGs unverständlicherweise nicht hochladen, ohne dass man entweder selber Hand anlegt am code der functions.php oder ein PlugIn verwendet. Ich setze das beliebte PlugIn SVG Support ein, allerdings bin ich damit nicht hundertprozentig zufrieden: Damit lassen sich SVG-Dateien zwar hochladen und in Seiten und Beiträgen verwenden, die üblichen Bildfunktionen (rechts, links, mittig ausrichten oder Größen festlegen) funktionieren allerdings nicht.
Daher: wenn jemand eine besser Lösung hat, würde ich mich über einen Hinweis in den Kommentaren freuen!
Fazit
Die Zeit ist reif. Für zukünftige Projekte habe ich es mir selber hinter die Ohren geschrieben: Verwende SVGs!
Die Vorteile sind überzeugend, die Technik einsteigerfreundlich und die Browserunterstützung schon seit längerem sehr gut.
Außerdem gibt es viele Infos zum Thema im Web – Video-Tutorials, Blog-Beiträge und mehr für Einsteiger wie Fortgeschritten finden sich zu Hauf. Also: auf geht’s!