Proveli smo puno vremena razgovarajući o korištenju inlinea i elementa. Možete izgraditi sustav ikona s onim koji obiluje prednostima.
Sustav ikona SVG možete stvoriti na druge načine. Možete postaviti tradicionalni mrežni list spritea u SVG i raditi spriteove u pozadini kao što smo to radili s rasterskim slikama. U budućnosti ćete moći koristiti identifikatore fragmenata, tako da to čak postaje malo lakše. Više informacija o tim stvarima.
Drugi način je ugrađivanje URI-ja podataka SVG slike izravno u CSS datoteku. To je pristup koji Grunticon zauzima.
Grunticon je Grunt dodatak za automatizaciju sustava ikona SVG. Potrebna je mapa puna SVG-a i obrađuje ih u CSS datoteku. Postoji gomila selektora, na temelju imena datoteka SVG slika, koje imaju background-imageURI SVG podataka (iako ne Base64).
Ako to učinite na ovaj način, znači da ćete dobiti skalabilnost SVG-a i prednosti veličine datoteke, ali to je sve. Ipak, često je to sve što vam treba.
Možda je najbolji dio Grunticona ipak taj što vam pruža sve što je potrebno za povratne promjene. To uključuje zamjensku tablicu stilova za PNG URI podataka, pa čak i pojedinačne PNG datoteke (koju on izrađuje za vas). Osim toga, skripta koju koristite na svojoj stranici za određivanje podrške i učitavanje samo odgovarajućeg lista stilova.
Mislim da je pošteno reći da ovo za sada olakšava rukovanje rezervnim igrama nego defs / tehnikom. Nije da je to nemoguće.
Grumpicon je inačica Grunticona u pregledniku koju smo koristili u ovom screencastu.
Dok ovo pišem, Grunticon radi na načinu da postupno poboljšava ugrađeni SVG, što bi bilo prilično cool!