Vi har brukt mye tid på å snakke om å bruke inline og elementet. Du kan bygge et ikon-system med det som er full av fordeler.
Du kan opprette et SVG-ikonsystem på andre måter. Du kan legge ut et tradisjonelt spridd ark i SVG og gjøre sprites som bakgrunnsposisjon som vi pleide å gjøre med rasterbilder. I fremtiden vil du kunne bruke fragmentidentifikatorer, slik at det til og med blir litt lettere. Mer informasjon om disse tingene.
En annen måte er å legge inn data-URI-er for SVG-bildet rett i en CSS-fil. Det er tilnærmingen som Grunticon tar.
Grunticon er et Grunt-plugin for å automatisere et SVG-ikonsystem. Det tar en mappe full av SVG og behandler dem til en CSS-fil. Det er en rekke velgere der, basert på filnavnene på SVG-bildene, som har en background-imageav SVG-data URI (ikke Base64 skjønt).
Å gjøre det på denne måten betyr at du får skalerbarhet av SVG og fordeler med filstørrelse, men det handler om det. Likevel, ofte er det alt du trenger.
Kanskje den beste delen om Grunticon er at den gir deg alt som er nødvendig for tilbakeslag. Dette inkluderer et alternativt stilark for data URI PNG-er og til og med individuelle PNG-er (som det lager for deg). I tillegg er et skript du bruker på siden din for å bestemme støtte og bare laste riktig stilark.
Jeg synes det er greit å si at dette gjør tilbakeslag lettere å håndtere enn def / teknikken, for nå. Ikke at det er umulig.
Grumpicon er en nettleserversjon av Grunticon, som vi brukte i denne skjermsendingen.
Grunticon jobber, mens jeg skriver dette, på en måte å gradvis forbedre opp til innebygd innebygd SVG, noe som ville være ganske kult!