Icon Fonts gegen SVG – Vergleich der Leistung in der Praxis

Ich höre die­se Debatte immer wie­der. Die meis­ten davon sind hin- und her­ge­hen­de Argumente über Abwärtskompatibilität, Zugänglichkeit, Entwickler-Workflow, Schärfe, Farben und ande­re ent­wick­ler­be­zo­ge­ne Themen. Das pas­siert, wenn man Äpfel mit Birnen vergleicht.

Für die meis­ten Webmaster steht die Geschwindigkeit an ers­ter Stelle, die Anpassung an zwei­ter Stelle und die Browser-Kompatibilität/Zugänglichkeit an letz­ter Stelle. Also habe ich das Ganze vereinfacht:

1. 2 oder 3 Icons (SVG)

Sie brau­chen nur 2 oder 3 Icons? Nehmen Sie SVG und Sie sind fertig.

2. Kleine alltägliche Icons (Icon Font)

Die meis­ten von Ihnen brau­chen nur eine Wolke für das Kommentar-Icon, das Hamburger-Menü, den "Benutzer"-Avatar und eini­ge Social-Media-Icons (10 Icons oder weni­ger). Wenn dies der Fall ist, kön­nen Sie sich für eines von bei­den ent­schei­den (Icon-Font oder SVG). Vielleicht könn­ten Sie sogar mit PNG auskommen.

Warum ist Icon Font hier das Beste? Weil es ein­fach zu ver­wen­den ist, eine klei­ne­re Größe hat, so dass es schnel­ler her­un­ter­ge­la­den wer­den kann, und auch weni­ger kom­pli­ziert im Browser ist (es lädt schnel­ler für den Benutzer). Sie kön­nen sogar ein benut­zer­de­fi­nier­tes Set bei fon­tel­lo von fon­ta­stic erstel­len, damit es schnel­ler lädt (weil Sie nur die Icons aus­wäh­len, die Sie wol­len. Niemand braucht die gesam­te fontawesome-Bibliothek.

3. Benutzerdefinierte Icons (Icon-Font oder SVG)

Eigene Icons erstel­len, wie z.B. Material-Icons? Das hängt wirk­lich davon ab, ob Sie pla­nen vie­le Icons zu benut­zen… sagen wir 30–40. Dann gewinnt die Icon-Font. Wenn Sie pla­nen, 10 zu haben, ist SVG wahr­schein­lich der rich­ti­ge Weg.

4. Große skalierbare Icons oder mehrfarbige Icons (SVG)

Hier glän­zen SVGs. Sie kön­nen Icons erstel­len, die auf ver­schie­de­ne Größen ska­liert wer­den sol­len und meh­re­re Farben ver­wen­den, um einen visu­el­len Grafikeffekt zu erzie­len. Für die meis­ten Leute ist dies nicht ein­mal eine Voraussetzung und soll­te nicht Teil der übli­chen Icon-Font vs. SVG-Debatte sein!

 

Über Ferkan Saglamsoy

Über Ferkan Saglamsoy

Ein Allrounder – Web-Strategie, Blogging, Sys-Admin, Tech-Unternehmer, Designer, Kreativkopf, Marketingspezialist. Über 10 Jahre WordPress Design, Entwicklung, Hosting, Geschwindigkeitsoptimierung, Produktberater, Marketing, Monetarisierung. Das alles mache ich.

Über Ferkan Saglamsoy

Über Ferkan Saglamsoy

Ein Allrounder – Web-Strategie, Blogging, Sys-Admin, Tech-Unternehmer, Designer, Kreativkopf, Marketingspezialist. Über 10 Jahre WordPress Design, Entwicklung, Hosting, Geschwindigkeitsoptimierung, Produktberater, Marketing, Monetarisierung. Das alles mache ich.

Schreiben Sie einen Kommentar