Warum SVG-Sprites (noch) kein ausreichender Ersatz für Icon-Fonts sind

Seit einigen Wochen propagiert die Web Szene den Einsatz von SVG-Sprites als Ersatz für Icon-Fonts. Alles soll so viel einfacher und zumindest bei modernen Browsern so viel problemloser funktionieren im Gegensatz zu Icon-Fonts. Davon wollte ich mich selbst überzeugen und habe kurzerhand Erdmann & Freunde von Icon-Fonts auf SVG-Sprites umgestellt. Dabei musste ich feststellen, dass wir noch ein gutes Stück davon entfernt sind, ausschließlich SVG zu verwenden.

Aber von vorne. Nachdem ich mir den Vortrag von Chris Coyier bei der beyond tellerrand sowie den Blogartikel von Sven Wolfermann zu Gemüte geführt hatte (s.a. Einführung in SVG Sprites), wollte ich mich selbst an den SVG-Sprites probieren.

Dank Icomoon war es nicht besonders schwer, meine bisher verwendeten Icons als SVG-Sprite zu exportieren, um sie im Anschluss inline in die Seite einzufügen. Diese Methode hat zwar den Nachteil, dass die Icons nicht gecached werden können, dafür kann man aber das SVG per CSS ansprechen und stylen. Das funktioniert unter normalen Umständen großartig. Und so konnte ich an einigen Stellen, wo ich ganz früher vielleicht eine Grafik benutzt hätte und später mit dem <i>-Tag oder mit ein wenig tricksen ein Icon-Font verwendete, nun einfach ein SVG-Element nutzen, so wie bei meiner Auflistung der Social-Icons:

Es gibt aber auch Stellen, an denen ist es nicht so leicht eine Grafik inline einzusetzen. Was ist, wenn ich ein Icon vor einen Listenpunkt (Beispiel) setzen will? Oder in einem Button? In solchen Fällen haben wir uns in der Vergangenheit die übliche Funktionsweise von Icon-Fonts sehr gut zunutze machen können, die ja eh schon über das Pseudoelement :before dargestellt werden.

Man kann auch SVG-Grafiken per :before und mit background-image einbinden, allerdings wird es dann ähnlich frickelig wie bei den Icon-Fonts. Schlimmer noch, man muss sogar noch ein paar Dinge mehr beachten und verliert beinahe alle Vorteile der Verwendung einer SVG-Datei, abgesehen von der verlustfreien Skalierung:

• SVG lässt sich nicht mehr per CSS stylen: Größen und Farben werden aus der Datei – und so wie ursprünglich angelegt – übernommen
• die Grafik nimmt sich wie ein Icon-Font Icon den Platz, den sie benötigt, sondern man muss Breite & Höhe explizit angeben.
• will man mehrere Grafiken in einer SVG kombinieren, muss man die Icons versetzt und wie bei bisherigen Sprites mit background-position verschieben. Ian Feature hat dazu einen Artikel geschrieben, wie sie es bei Lonely Planet gelöst haben. Hier gibt es außerdem ein Beispiel.

Das war mir ehrlich gesagt zu viel Arbeit und zu wenig Vorteil. Deshalb nutze ich bei Erdmann & Freunde vorerst eine Mischung aus SVG und Icon-Fonts. Für Grafiken, die in unmittelbarer Nähe des Textes platziert werden, nutze ich weiterhin Icon-Fonts. Für alle anderen Fälle versuche ich in Zukunft auf SVG-Sprites zu setzen.

Wie sieht es bei euch aus? Nutzt ihr schon SVG-Sprites in euren Webprojekten? Welche Erfahrungen habt ihr damit gemacht? Tipps, Fehler und Ergänzungen könnt ihr gerne in den Kommentaren hinterlassen.