Wir haben viel Zeit damit verbracht, über die Verwendung von Inline und dem Element zu sprechen . Sie können damit ein Icon-System erstellen, das viele Vorteile bietet.
Sie können ein SVG-Symbolsystem jedoch auch auf andere Weise erstellen. Sie können in SVG ein traditionelles Raster-Sprite-Blatt auslegen und Sprites in Hintergrundposition erstellen, wie wir es früher mit Rasterbildern getan haben. In Zukunft können Sie Fragment-IDs verwenden, was noch einfacher wird. Weitere Informationen zu diesen Dingen.
Eine andere Möglichkeit besteht darin, Daten-URIs des SVG-Bildes direkt in eine CSS-Datei einzubetten. Das ist der Ansatz, den Grunticon verfolgt.
Grunticon ist ein Grunt-Plugin zur Automatisierung eines SVG-Icon-Systems. Es nimmt einen Ordner voller SVG und verarbeitet sie zu einer CSS-Datei. Es gibt eine Reihe von Selektoren, die auf den Dateinamen der SVG-Bilder basieren und einen background-imageder SVG-Daten-URI haben (allerdings nicht Base64).
Wenn Sie dies auf diese Weise tun, erhalten Sie die Skalierbarkeit der Vorteile von SVG und Dateigröße, aber das war es auch schon. Trotzdem ist das oft alles, was Sie brauchen.
Das vielleicht Beste an Grunticon ist jedoch, dass es Ihnen alles bietet, was Sie für Fallbacks benötigen. Dies beinhaltet ein alternatives Stylesheet für Daten-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 bestimmen und nur das entsprechende Stylesheet zu laden.
Ich denke, es ist fair zu sagen, dass dies Fallbacks im Moment einfacher zu handhaben macht als die Defs / Technik. Nicht dass es unmöglich wäre.
Grumpicon ist eine In-Browser-Version von Grunticon, die wir in diesem Screencast verwendet haben.
Während ich dies schreibe, arbeitet Grunticon an einer Möglichkeit, schrittweise auf eingebettetes Inline-SVG umzusteigen, was ziemlich cool wäre!