We hebben veel tijd besteed aan het praten over het gebruik van inline en het element. Daarmee kun je een pictogramsysteem bouwen dat vol voordelen zit.
U kunt echter op andere manieren een SVG-pictogramsysteem maken. Je zou een traditioneel gerasterd sprite-blad in SVG kunnen opmaken en sprites op de achtergrondpositie kunnen maken, zoals we vroeger deden met rasterafbeeldingen. In de toekomst kun je fragment-ID's gebruiken, zodat dat zelfs nog wat makkelijker wordt. Meer informatie over deze zaken.
Een andere manier is om gegevens-URI's van de SVG-afbeelding rechtstreeks in een CSS-bestand in te sluiten. Dat is de aanpak die Grunticon volgt.
Grunticon is een Grunt-plug-in voor het automatiseren van een SVG-pictogramsysteem. Het neemt een map vol SVG en verwerkt deze in een CSS-bestand. Er zitten een aantal selectors in, gebaseerd op de bestandsnamen van de SVG-afbeeldingen, die een background-imagevan de SVG-gegevens-URI hebben (niet Base64).
Als u het op deze manier doet, krijgt u de schaalbaarheid van SVG en de voordelen van bestandsgrootte, maar dat is het dan ook. Toch is dat vaak alles wat je nodig hebt.
Misschien wel het beste van Grunticon is dat het je alles geeft wat nodig is voor fallbacks. Dit omvat een alternatief stylesheet voor gegevens-URI PNG's en zelfs individuele PNG's zelf (die het voor u maakt). Plus, een script dat u op uw pagina gebruikt om de ondersteuning te bepalen en alleen de juiste stylesheet te laden.
Ik denk dat het redelijk is om te zeggen dat fallbacks voorlopig gemakkelijker te hanteren zijn dan de defs / techniek. Niet dat het onmogelijk is.
Grumpicon is een in-browser versie van Grunticon, die we in deze screencast hebben gebruikt.
Grunticon werkt, terwijl ik dit schrijf, aan een manier om progressief te verbeteren tot embedded inline SVG, wat best gaaf zou zijn!