Ich höre diese Debatte immer wieder. Die meisten davon sind hin- und hergehende Argumente über Abwärtskompatibilität, Zugänglichkeit, Entwickler-Workflow, Schärfe, Farben und andere entwicklerbezogene Themen. Das passiert, wenn man Äpfel mit Birnen vergleicht.
Für die meisten Webmaster steht die Geschwindigkeit an erster Stelle, die Anpassung an zweiter Stelle und die Browser-Kompatibilität/Zugänglichkeit an letzter Stelle. Also habe ich das Ganze vereinfacht:
1. 2 oder 3 Icons (SVG)
Sie brauchen nur 2 oder 3 Icons? Nehmen Sie SVG und Sie sind fertig.
2. Kleine alltägliche Icons (Icon Font)
Die meisten von Ihnen brauchen nur eine Wolke für das Kommentar-Icon, das Hamburger-Menü, den "Benutzer"-Avatar und einige Social-Media-Icons (10 Icons oder weniger). Wenn dies der Fall ist, können Sie sich für eines von beiden entscheiden (Icon-Font oder SVG). Vielleicht könnten Sie sogar mit PNG auskommen.
Warum ist Icon Font hier das Beste? Weil es einfach zu verwenden ist, eine kleinere Größe hat, so dass es schneller heruntergeladen werden kann, und auch weniger kompliziert im Browser ist (es lädt schneller für den Benutzer). Sie können sogar ein benutzerdefiniertes Set bei fontello von fontastic erstellen, damit es schneller lädt (weil Sie nur die Icons auswählen, die Sie wollen. Niemand braucht die gesamte fontawesome-Bibliothek.
3. Benutzerdefinierte Icons (Icon-Font oder SVG)
Eigene Icons erstellen, wie z.B. Material-Icons? Das hängt wirklich davon ab, ob Sie planen viele Icons zu benutzen… sagen wir 30–40. Dann gewinnt die Icon-Font. Wenn Sie planen, 10 zu haben, ist SVG wahrscheinlich der richtige Weg.
4. Große skalierbare Icons oder mehrfarbige Icons (SVG)
Hier glänzen SVGs. Sie können Icons erstellen, die auf verschiedene Größen skaliert werden sollen und mehrere Farben verwenden, um einen visuellen Grafikeffekt zu erzielen. Für die meisten Leute ist dies nicht einmal eine Voraussetzung und sollte nicht Teil der üblichen Icon-Font vs. SVG-Debatte sein!