Icon Fonts oder SVG-Sprites?

Sag's mit einem Piktogramm

Ein Bild sagt mehr als tausend Worte – und vor allem braucht es weniger Platz. Gerade auf den kleinen Displays mobiler Endgeräte ist es wichtig, den verfügbaren Platz bestmöglich zu nutzen. Piktogramme für Suche, Warenkorb oder Kontakt verschlanken die Navigationsleiste und sind dabei nutzerfreundlich.

Piktogramme sollten nicht als Bilddatei eingebunden werden. Stattdessen empfehlen sich entweder Icon Fonts oder SVG-Sprites. Beide Varianten bieten gegenüber Bilddateien den Vorteil, dass sie skalierbar sind und eine geringere Dateigröße haben. Das macht sich auch bei der Ladezeit bemerkbar.

Doch was ist besser: Icon Fonts oder SVG-Sprites? Hier scheiden sich die Geister. Als Experten für Webdesign erklären wir, wo der Unterschied liegt.

Grafik: Iconfont vom Online-Shop Schloss Wackerbarth

Was sind Icon Fonts?

Icon Fonts sind Webfonts, in denen keine Buchstaben, sondern Piktogramme abgebildet werden. Auf einer Website werden sie wie eine Schrift ausgelesen. Icon Fonts werden mittels CSS in den Quelltext integriert. So sind Veränderungen am HTML-Code nicht notwendig.

Was sind SVG-Sprites?

Skalierbare Vektorgrafiken – kurz: SVGs – sind zweidimensionale Vektorgrafiken, die auf XML basieren. Unter einem SVG-Sprite kann man sich eine Art Collage vorstellen. Viele einzelne Bilder, z.B. eine Sammlung an Piktogrammen, werden zu einer Bilddatei kombiniert. Für die Anzeige eines einzelnen Icons wie etwa dem Warenkorb wird dann nur der entsprechende Teil der Bilddatei angezeigt. So muss das Bild beim Laden einer Seite nur einmal per http-Request angefordert werden.

Vorteile & Nachteile

Ladezeit

Verglichen mit einer Bilddatei sind sowohl Icon Fonts als auch SVG-Sprites schneller. Jedoch unterscheiden sich beide Varianten voneinander. Ein SVG-Sprite muss nur einmal geladen werden, bei einem Icon Font bedeutet jedes Piktogramm einen eigenen http-Request. Dadurch lädt ein SVG-Icon schneller.

Positionierung

Da ein Icon Font im Prinzip eine Webschrift ist und vom Browser auch als solche ausgelesen wird, gelten Bestimmungen wie Zeilenhöhe (»line-height«) oder Zeichenabstand (»letter-spacing«) auch für die Icons. Dadurch ist das Piktogramm nicht so frei positionierbar wie es bei einer SVG-Grafik der Fall ist.

Browser Support

In diesem Punkt erweist sich der Icon Font als wahrer Alleskönner: Auch ältere Browser stellen für diese Variante kein Problem dar. SVG-Grafiken werden hingegen nur von neueren Browsern richtig ausgelesen. Alles, was älter als Internet Explorer 8 bzw. Android 2.3 ist, kann nicht unterstützt werden.

Anpassbarkeit

Bei einem Icon Font können Größe, Farbe, Schatten und Rotation mittels CSS angepasst werden. Eine SVG-Grafik bietet zusätzliche Möglichkeiten der Gestaltung, wie etwa Mehrfarbigkeit, Farbverläufe oder Animationen.

Barrierefreiheit

Wo Webfonts bei Ladeschwierigkeiten mit einer Fallback Schrift ersetzt werden, erscheinen bei Icon Fonts häufig nur kryptische Zeichen. Dieses Problem kann zwar mit PNG-Bilddateien als Fallback Lösung umgangen werden, doch bei der Verwendung von SVG-Grafiken tritt es gar nicht auf. Im Gegenteil: Im Vergleich mit Icon Fonts können SVGs mit ihrer Barrierearmut überzeugen. So lassen sich am Piktogramm beispielsweise Alt-Tags hinterlegen, die von Screenreadern ausgelesen werden können.

Semantik

Wird ein Piktogramm über einen Icon Font darstellt, ist eine Bearbeitung nur im HTML-Code möglich. SVG-Sprites werden hingegen im CSS bearbeitet, was weniger umständlich ist.

Entscheidung? Abwägen!

Welche Lösung passt, hängt von der individuellen Ausgangssituation ab.

SVG-Sprites sind flexibler einsetzbar und erlauben mehr gestalterische Freiheit. Vor allem für mobile Endgeräte sind sie aufgrund der stufenlosen Skalierbarkeit geeignet. Responsive Websites sollten darum diese Variante bevorzugen.

Können Sie hingegen absehen, dass Sie auf jeden Fall ältere Browser bedienen müssen, dann bieten sich eher Icon Fonts an. Optimaler Browser-Support und einfache Fallback-Lösungen zählen hier zu den entscheidenden Vorteilen.

Susanne Aurin

Susanne AurinLeitung Grafikdesign