Wir haben viel Zeit damit verbracht, über die Verwendung von Inline-<svg> und dem <use>-Element zu sprechen. Sie können damit ein Icon-System aufbauen, das viele Vorteile bietet.
Sie können ein SVG-Icon-System zwar auch auf andere Weise erstellen. Sie könnten ein traditionelles, auf einem Gitter basierendes Sprite-Sheet in SVG erstellen und dann wie früher bei Rasterbildern mit background-position-Sprites arbeiten. In Zukunft werden Sie Fragment-Identifikatoren verwenden können, was die Sache noch einfacher macht. Weitere Informationen zu diesen Dingen.
Ein anderer Weg ist, Data-URIs des SVG-Bildes direkt in eine CSS-Datei einzubetten. Diesen Ansatz verfolgt Grunticon.
Grunticon ist ein Grunt-Plugin zur Automatisierung eines SVG-Icon-Systems. Es nimmt einen Ordner voller SVGs entgegen und verarbeitet sie zu einer CSS-Datei. Dort gibt es eine Reihe von Selektoren, basierend auf den Dateinamen der SVG-Bilder, die eine background-image des SVG-Daten-URI haben (jedoch nicht Base64).
Auf diese Weise erhalten Sie die Skalierbarkeit von SVG und die Vorteile der Dateigröße, aber das ist auch schon alles. Dennoch ist das oft alles, was Sie brauchen.
Das vielleicht Beste an Grunticon ist jedoch, dass es Ihnen alles Notwendige für Fallbacks bietet. Dazu gehören ein alternativer Stylesheet für Data-URI-PNGs und sogar einzelne PNGs selbst (die es für Sie erstellt). Außerdem ein Skript, das Sie auf Ihrer Seite verwenden, um die Unterstützung zu ermitteln und nur den entsprechenden Stylesheet zu laden.
Ich denke, man kann sagen, dass dies die Handhabung von Fallbacks im Moment einfacher macht als die defs/<use>-Technik. Nicht, dass es unmöglich wäre.
Grumpicon ist eine In-Browser-Version von Grunticon, die wir in diesem Screencast verwendet haben.
Grunticon arbeitet, während ich das schreibe, an einer Möglichkeit, schrittweise zu eingebetteten Inline-SVGs zu erweitern, was ziemlich cool wäre!