SVG-Sprites statt Icon-Fonts: Mit drei Methoden zur SVG-Sprite-Erstellung ans Ziel
Kommentare

Icon-Systeme innerhalb einer Website lassen sich mithilfe unterschiedlicher Methoden – etwa Icon-Fonts oder SVG-Sprites – darstellen. Beides bietet Vor- und Nachteile, und für beide Methoden müssen Webdesigner darüber nachdenken, wie sich die Darstellung optimieren lässt und wie Icons schneller erstellt werden können.

Sara Soueidan hat drei verschiedene Möglichkeiten, SVG-Sprites zu erstellen, vorgestellt und gibt gleichzeitig Tipps, welche Tools zur Automatisierung bei der Sprite-Erstellung nützlich sind.

Methode Eins: HTML Inline SVG-Sprites

SVGs bieten zahlreiche Möglichkeiten, Bilder in Websites zu implementieren, etwa als „Icon-System“. Dabei können sie auch mit CSS gestylt und animiert werden, und so den Content durch Effekte aufwerten. Um ein Icon-System als SVG-Sprite zu erstellen, muss man zunächst die Icons für die Nutzung vorbereiten. Dafür muss sowohl der Code aufgeräumt, als auch ein ausgewiesener SVG-Ordner mit den einzelnen, als .svg-Datei gespeicherten Icons erstellt werden.

Da SVGs XML-Code sind, können sie als „Code-Insel“ mit dem -Element inline in ein HTML-Dokument eingebettet werden. Die so eingebetteten SVGs dienen als Container für die Icons und werden zu dem tatsächlich genutzten Sprite umgewandelt. Dafür werden die Icons in einem Element platziert und in ein -Element gewrappt. So werden sie nur gerendert, wenn sie von einem Element aufgerufen werden; zudem kann ihnen jeweils ein eigenes viewBox-Attribut hinzugefügt werden.

Diese Technik ist recht einfach anzuwenden und wird in allen Browsern mit SVG-Support unterstützt. Allerdings gibt es einen entscheidenden Nachteil: das SVG-Sprite kann nicht gecached werden. Zudem ist das Stylen der Icons nicht ganz einfach, weil die entsprechenden Elemente nicht auf dem traditionellen Weg im CSS ausgewählt werden können.

Methode Zwei: CSS Inline SVG-Sprites

SVG-Sprites können auch mit einem Trick und dem zur Verfügung stellen von Fallback-Lösungen für nicht unterstützte Browser im CSS erstellt werden. Dabei wird das Style-Sheet in das Sprite, das die Icons enthält, umgewandelt.

Zunächst werden die Icons in die Grumpicon-Web-App geladen und generiert. Anschließend können sie leicht heruntergeladen und an die entsprechenden Stellen im Code der Website platziert werden. Bei diesem Vorgang werden ein Ordner mit den PNG-Versionen der Icons als Fallback-Lösung, drei verschiedene Style-Sheets, eine loader-Script-Datei und ein Live-Beispiel der anderen Dateien erstellt.

Bei dieser Methode werden die Icons als Hintergrundbilder zur Verfügung gestellt und können ähnlich wie ein CSS-Sprite genutzt werden. Allerdings hat dies den Nachteil, dass die SVGs nicht mit CSS gestyled werden können. Auch Animationen sind auf in -Elementen definierte SVGs beschränkt.

Methode Drei: SVG-Fragment-Identifiers und -Ansichten

Bei der letzten von Sara Soueidan vorgestellten Methode, wird vom viewBox-Attribut Gebrauch gemacht, um das SVG zu dem gewünschten Icon zurechtzuschneiden. Dabei wird das SVG-Sprite wie ein Bild behandelt, das andere Bilder – in diesem Fall die Icons – enthält.

Hierfür werden die SVG-Icons in einem Haupt-SVG-Container platziert; sie können zudem in einem Grafik-Editor individuell positioniert und so als Grafik exportiert werden. Soll anschließend nur ein Teil der Grafik angezeigt werden, wird diese mit dem SVG-viewBox-Attribut auf den gewünschten Teil zurechtgeschnitten und dieser mithilfe eines Fragment-Identifiers angezeigt, etwa in einem – oder -Element.

So kann zum Beispiel auch auf externe SVGs verwiesen und Browser-Caching genutzt werden; zudem kann so je SVG-Einbettungs-Technik genutzt werden, weil es keine Beschränkung auf bestimmte Tags gibt.

Alle drei Methoden bieten Vor- und Nachteile und sind keine allgemein gültige Lösung für das Erstellen von Icon-Systemen mit SVG-Sprites. Dementsprechend kann eine Methode zwar für ein Projekt passend sein, während ein anderes Projekt jedoch eine andere Vorgehensweise fordert.

Trotzdem dürften diese Methoden, die Sara Soueidan ausführlich und mit interessanten Code-Beispielen in ihrem Artikel An Overview of SVG Sprite Creation Techniques vorgestellt hat, bereits wertvolle Tipps zum Erstellen von SVG-Sprites liefern.

Aufmacherbild: Text the word IDEAS. von Shutterstock / Urheberrecht: Jianghaistudio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -