Nous avons passé beaucoup de temps à parler de l'utilisation d'inline et de l' élément. Vous pouvez créer un système d'icônes qui regorge d'avantages.
Vous pouvez créer un système d'icônes SVG par d'autres moyens. Vous pouvez disposer une feuille de sprite quadrillée traditionnelle en SVG et faire des sprites de position d'arrière-plan comme nous le faisions avec des images raster. À l'avenir, vous pourrez utiliser des identifiants de fragments, ce qui sera même un peu plus facile. Plus d'informations sur ces choses.
Une autre façon est d'incorporer les URI de données de l'image SVG directement dans un fichier CSS. Telle est l'approche adoptée par Grunticon.
Grunticon est un plugin Grunt pour automatiser un système d'icônes SVG. Il prend un dossier plein de SVG et les traite dans un fichier CSS. Il y a un tas de sélecteurs là-dedans, basés sur les noms de fichiers des images SVG, qui ont un background-imageURI de données SVG (pas Base64 cependant).
Cela signifie que vous bénéficiez de l'évolutivité du SVG et des avantages de la taille des fichiers, mais c'est à peu près tout. Pourtant, c'est souvent tout ce dont vous avez besoin.
Peut-être que la meilleure partie de Grunticon est qu'il vous donne tout le nécessaire pour les solutions de secours. Cela inclut une feuille de style alternative pour les URI de données PNG et même les PNG individuels eux-mêmes (qu'il crée pour vous). De plus, un script que vous utilisez sur votre page pour déterminer la prise en charge et charger uniquement la feuille de style appropriée.
Je pense qu'il est juste de dire que cela rend les replis plus faciles à gérer que les defs / technique, pour le moment. Non pas que ce soit impossible.
Grumpicon est une version intégrée au navigateur de Grunticon, que nous avons utilisée dans ce screencast.
Au moment où j'écris ceci, Grunticon travaille sur un moyen d'améliorer progressivement le SVG intégré en ligne, ce qui serait plutôt cool!