Vi har tillbringat mycket tid på att prata om att använda inline och elementet. Du kan bygga ett ikonsystem med det som är full av fördelar.
Du kan skapa ett SVG-ikonsystem men på andra sätt. Du kan lägga ut ett traditionellt spridda sprite-ark i SVG och göra sprits i bakgrundsposition som vi brukade göra med rasterbilder. I framtiden kommer du att kunna använda fragmentidentifierare, så att det blir lite enklare. Mer information om dessa saker.
Ett annat sätt är att bädda in data-URI: er för SVG-bilden direkt i en CSS-fil. Det är det tillvägagångssätt som Grunticon tar.
Grunticon är ett Grunt-plugin för att automatisera ett SVG-ikonsystem. Det tar en mapp full av SVG och bearbetar dem till en CSS-fil. Det finns en massa väljare där, baserat på filnamnen på SVG-bilderna, som har en background-imageav SVG-data URI (dock inte Base64).
Att göra det på det här sättet innebär att du får skalbarheten för SVG och fördelar med filstorlek, men det handlar om det. Det är fortfarande allt du behöver.
Kanske är dock det bästa med Grunticon att det ger dig allt som behövs för fallbackar. Detta inkluderar ett alternativt formatmall för data URI PNG och till och med enskilda PNG: er (som det skapar åt dig). Plus, ett skript som du använder på din sida för att bestämma stöd och bara ladda lämpligt formatmall.
Jag tycker det är rättvist att säga att detta gör det lättare att hantera fall än def / tekniken för tillfället . Inte för att det är omöjligt.
Grumpicon är en version av Grunticon i webbläsaren som vi använde i den här skärmutsändningen.
Grunticon arbetar, när jag skriver detta, på ett sätt att gradvis förbättra upp till inbäddad inbyggd SVG, vilket skulle vara ganska coolt!