Olemme käyttäneet paljon aikaa puhumalla inline- ja elementti-ominaisuuksien käytöstä. Voit rakentaa kuvakejärjestelmän, jolla on runsaasti etuja.
Voit luoda SVG-kuvakejärjestelmän muilla tavoin. Voisit sijoittaa perinteisen ristikkäisen sprite-levyn SVG: hen ja tehdä taustan sprittejä, kuten tapasimme ennen rasterikuvia. Tulevaisuudessa voit käyttää fragmenttitunnisteita, joten se on jopa hieman helpompaa. Lisätietoja näistä asioista.
Toinen tapa on upottaa SVG-kuvan data-URI suoraan CSS-tiedostoon. Grunticon noudattaa tätä lähestymistapaa.
Grunticon on Grunt-laajennus SVG-kuvakejärjestelmän automatisointiin. Se vie SVG: tä sisältävän kansion ja käsittelee ne CSS-tiedostoksi. Siellä on joukko valitsimia SVG-kuvien tiedostonimien perusteella, joilla on yksi background-imageSVG-datan URI: sta (ei kuitenkaan Base64).
Näin tekeminen tarkoittaa, että saat SVG: n skaalautuvuuden ja tiedostokokoedut, mutta se on siitä. Silti usein se on kaikki mitä tarvitset.
Ehkä paras osa Grunticonia on kuitenkin se, että se antaa sinulle kaiken tarvittavan varauksiin. Tämä sisältää vaihtoehtoisen tyylitaulukon URI-PNG-tiedostoille ja jopa yksittäisille PNG-tiedostoille (jotka se luo sinulle). Lisäksi komentosarja, jota käytät sivullasi tuen määrittämiseen ja vain sopivan tyylitaulukon lataamiseen.
Mielestäni on oikeudenmukaista sanoa, että tämä tekee varakappaleista helpommin käsiteltävissä kuin defs / tekniikka, toistaiseksi. Ei, että se on mahdotonta.
Grumpicon on selainversio Grunticonista, jota käytimme tässä kuvaruudussa.
Grunticon työskentelee kirjoittaessani tapaa parantaa asteittain upotettua sisäistä SVG: tä, mikä olisi aika siistiä!