Vi har brugt meget tid på at tale om at bruge inline og elementet. Du kan opbygge et ikon-system med det, der er rig på fordele.
Du kan oprette et SVG-ikonsystem dog på andre måder. Du kunne lægge et traditionelt gitteret sprite ark i SVG og lave baggrundsposition sprites som vi plejede at gøre med rasterbilleder. I fremtiden vil du kunne bruge fragmentidentifikatorer, så det endda bliver lidt lettere. Flere oplysninger om disse ting.
En anden måde er at integrere data-URI'er af SVG-billedet direkte i en CSS-fil. Det er den tilgang, som Grunticon tager.
Grunticon er et Grunt-plugin til automatisering af et SVG-ikonsystem. Det tager en mappe fuld af SVG og behandler dem til en CSS-fil. Der er en masse vælgere derinde, baseret på filnavne på SVG-billederne, der har en background-imageaf SVG-data URI (dog ikke Base64).
At gøre det på denne måde betyder, at du får skalerbarheden af SVG og fordele ved filstørrelse, men det handler om det. Det er stadig alt hvad du har brug for.
Måske er det bedste ved Grunticon dog, at det giver dig alt, hvad der er nødvendigt for tilbagefald. Dette inkluderer et alternativt stilark til data URI PNG'er og endda individuelle PNG'er selv (som det opretter for dig). Plus et script, du bruger på din side til at bestemme support og kun indlæse det relevante typografiark.
Jeg synes det er rimeligt at sige, at dette gør tilbagefald lettere at håndtere end defs / teknikken, for nu. Ikke at det er umuligt.
Grumpicon er en version af Grunticon i browseren, som vi brugte i denne screencast.
Grunticon arbejder, mens jeg skriver dette, på en måde til gradvis at forbedre op til indlejret inline SVG, hvilket ville være ret sejt!