Mēs esam pavadījuši daudz laika, runājot par inline un elementa izmantošanu. Jūs varat izveidot ikonu sistēmu ar to, kas ir pārpilns ar priekšrocībām.
Jūs varat izveidot SVG ikonu sistēmu, lai arī citos veidos. Jūs varētu izkārtot tradicionālu režģotu sprite lapu SVG un veikt fona stāvokļa sprites, kā mēs to darījām ar rastra attēliem. Nākotnē jūs varēsiet izmantot fragmentu identifikatorus, lai tas būtu pat nedaudz vieglāk. Plašāka informācija par šīm lietām.
Vēl viens veids ir iegult SVG attēla datu URI tieši CSS failā. Tā ir pieeja, kuru izmanto Grunticon.
Grunticon ir Grunt spraudnis SVG ikonu sistēmas automatizēšanai. Tas aizņem mapi, kas pilna ar SVG, un apstrādā tos CSS failā. Tur ir virkne atlasītāju, pamatojoties uz SVG attēlu failu nosaukumiem, kuriem ir background-imageSVG datu URI (tomēr nav Base64).
Šādi rīkojoties, jūs saņemat SVG mērogojamību un faila lieluma priekšrocības, taču tas arī viss. Tomēr bieži vien tas ir viss, kas jums nepieciešams.
Varbūt labākā daļa par Grunticon ir tā, ka tas dod jums visu nepieciešamo atkāpšanās gadījumiem. Tas ietver alternatīvu stilu lapu datu URI PNG un pat atsevišķiem PNG (ko tā jums izveido). Turklāt skripts, kuru izmantojat savā lapā, lai noteiktu atbalstu un ielādētu tikai atbilstošo stila lapu.
Es domāju, ka ir taisnīgi teikt, ka tas tagad padara atkāpes vieglāk apstrādājamas nekā defs / tehnika. Ne tas, ka tas nav iespējams.
Grumpicon ir pārlūkprogrammas Grunticon versija, kuru mēs izmantojām šajā ekrānuzņēmumā.
Kad es to rakstu, Grunticon strādā pie tā, kā pakāpeniski uzlabot līdz iegultam inline SVG, kas būtu diezgan forši!