Icon-Fonts oder SVG Sprites?

Der beste Weg Icons in Webseiten zu integrieren

Die Verwendung einer Vielzahl von Icons liegt bei aktuellen Webdesigns voll im Trend. Warum auch nicht? Man spart Text und integriert kleine Eyecatcher. Wenn es um die Integration und Darstellung im Web geht, gibt es noch keinen perfekten Weg. Wer für Multi-Displays entwickelt, kommt nicht um eine möglichst hochauflösende Bereitstellung der Icons herum. Am Dominieren sind die Einbindung von Icons über SVG Sprites und Icon-Fonts. Auf die Vor- und Nachteile werde ich in den folgenden Absätzen eingehen.

Icon-Fonts

Anstelle von Schriftzeichen werden bei den Icon-Fonts Piktogramme abgebildet. Diese sind je nach Schrift den einzelnen Zeichen oder Zeichenkodierungen zugeordnet. Zu den verbreitetsten Fonts gehören die Font Awesome, MAKI und Entypo.

Vorteile von Icon-Fonts

• Kompatibilität: Die Unterstützung für Webfonts reicht bis auf Version 5.5 des Internet Explorers zurück
• Skalierbarkeit: Da es sich um eine Schrift handelt, sind die Icons vektorisiert und werden bei jeder möglichen Auflösung scharf dargestellt
• Flexibilität: Der Font kann einfach und ohne Aufwand mit normalem Text kombiniert werden
• Farben: Per CSS können die Icon-Fonts, wie „normaler“ Text, per „color:“-Befehl umgefärbt werden

Nachteile von Icon-Fonts

• Achtung! Fallback (-schrift): Wird die Schrift nicht geladen hat man ein Problem. In diesem Fall wird eine Fallback-Schrift eingesetzt, die meist nur ein kryptisches Zeichen darstellt
• Icons können nur in einer Farbe dargestellt werden
• Ladezeit: Die Fonts werden später geladen
• Für eine Icon-Vorschau muss man eine Webseite öffnen oder bestimmte Software verwenden
• Ohne Optimierung sind viele nicht genutzte Icons integriert (die Dateigröße ist zu groß)
• Nur schwer über eine Line-Height positionierbar

SVG Sprites

SVGs bieten grundsätzlich mehr Möglichkeiten als Icon-Fonts. Wie setzt sich eine SVG Sprites zusammen? Es handelt sich um eine SVG-Datei in der alle zu verwendenden Icons gesammelt und vektorisiert abliegen.

Vorteile von SVG Sprites

• Barrierefrei(er): Der Text der Webseite wird nicht durch zusätzliche unlesbare Begriffe erweitert
• Flexibilität: Können mehrfarbig und animiert dargestellt werden
• Einfache / freie Positionierung
• Gute Ladezeiten: SVGs bestehen aus Code-Zeilen

Nachteile von SVG Sprites

• Browser-Kompatibilität: Nicht abbildbar im Internet Explorer 9 bis 11
• Farben lassen sich nicht ganz so einfach erstellen wie bei den Icon-Fonts

Fazit

Im direkten Vergleich sprechen mehr Punkte für den Einsatz von SVG Sprites, wenn es nicht gerade um den Browser-Support in älteren Internet Explorern geht. Aber auch hierfür gibt es mittlerweile mehrere Fallbacks wie z.B. die JS-Library SVG4everybody, die die fehlende Browser-Kompatibilität über eine Ajax-Funktion löst. Oder man greift für die älteren Browser auf eine PNG Sprites zurück.

Außerdem sind SVGs genau dafür da. Sie sollen Icons in Vektorform auf Webseiten darstellen. Bei den Icon-Fonts handelt es sich streng genommen nur um einen kleinen „Hack“. Schriften werden in Icons „umgemünzt“.