Am petrecut mult timp vorbind despre utilizarea inline și a elementului. Puteți construi un sistem de pictograme cu acelea pline de avantaje.
Puteți crea un sistem de pictograme SVG deși în alte moduri. Ați putea așeza o foaie de sprite tradițională în grilă în SVG și puteți face sprite în poziție de fundal, așa cum făceam cu imaginile raster. În viitor, veți putea folosi identificatori de fragmente, astfel încât să devină chiar mai ușor. Mai multe informații despre aceste lucruri.
O altă modalitate este de a încorpora date URI ale imaginii SVG direct într-un fișier CSS. Aceasta este abordarea pe care o ia Grunticon.
Grunticon este un plugin Grunt pentru automatizarea unui sistem de pictograme SVG. Este nevoie de un folder plin de SVG și le procesează într-un fișier CSS. Există o grămadă de selectoare acolo, bazate pe numele de fișiere ale imaginilor SVG, care au un background-imageURI de date SVG (nu Base64 însă).
A face acest lucru înseamnă că obțineți scalabilitatea avantajelor SVG și a dimensiunii fișierului, dar cam atât. Totuși, de multe ori de asta aveți nevoie.
Poate că cea mai bună parte despre Grunticon este că vă oferă tot ce este necesar pentru rezolvări. Aceasta include o foaie de stil alternativă pentru PNG URI de date și chiar PNG-uri individuale (pe care le creează pentru dvs.). În plus, un script pe care îl utilizați pe pagina dvs. pentru a determina asistența și pentru a încărca doar foaia de stil adecvată.
Cred că este corect să spunem că acest lucru face ca rezolvările să fie mai ușor de manevrat decât def / tehnica, deocamdată. Nu că e imposibil.
Grumpicon este o versiune în browser a lui Grunticon, pe care am folosit-o în acest screencast.
În timp ce scriu acest lucru, Grunticon lucrează la o modalitate de a îmbunătăți progresiv până la SVG încorporat, ceea ce ar fi destul de cool!