SVG: n täydellinen opas

Sivu 6/6: Spriteiden voima

Spriteiden voima

SVG: n avulla voimme luoda kuvakkeita resoluutiosta riippumattomassa tiedostomuodossa, mikä on mahtavaa, mutta HTTP-protokollan rajoitusten vuoksi emme halua tehdä uutta tiedostopyyntöä jokaiselle verkkosivustomme kuvakkeelle. Tämä muuttuu pian HTTP / 2-protokollan kanssa.

kuinka photoshop tatuointeja jollekin

Jotta jokaiselle kuvakkeelle ei tarvitsisi esittää erillistä pyyntöä, voimme palata vanhan ystävämme, sprite, paitsi tällä kertaa SVG: ssä. Luomaan sprite SVG: ssä käytämme ja käytä tunnusta myöhempää ja viewBox attribuutti kankaan koon määrittämiseksi. Symbolikuvakkeen sisälle luomme muodot, tekstin ja muut elementit, jotka muodostavat kuvakkeemme.



Symbolimerkin sisäpuolelle voimme myös lisätä esteettömyyttä lisääviä elementtejä, kuten ja tunnisteet. Luomme kuvakkeet a: n sisään tunnisteen määrittämiseksi myöhempää käyttöä varten ja varmistaakseen, että niitä ei tulosteta sivulle.



On olemassa useita tapoja luoda sprites SVG: ssä. Ne voidaan luoda vektoriohjelmistoilla - kuten Adobella Illustrator CC tai luonnos - yksinkertaisesti sijoittamalla kuvakkeet taululle ja viemällä tiedosto SVG: ksi. Niiden tuottama koodi tarvitsee kuitenkin jonkin verran muokkausta, jotta sitä voidaan käyttää kuvakejärjestelmänä. Toinen tapa on luoda kuvakejärjestelmä manuaalisesti. Tämä ei ole liian vaikeaa, ja sinulla on täydellinen hallinta merkinnöissä. SVG-spritit voidaan myös sisällyttää rakennusjärjestelmiin, kuten gulp tai grunt, jolloin valitset SVG-tiedostoja sisältävän kansion ja määrität rakennuksen tuottamaan yhden SVG-spriten.

Kun olemme luoneet tai luoneet SVG-spriteemme, voimme käyttää sitä muutamalla tavalla. Voisimme kopioida tiedoston sisällön ja laittaa sen sivumme yläosaan - tätä kutsutaan riviksi. Vaihtoehtoisesti, jos käytämme php: tä, voimme käyttää file_get_contents () toiminto sisällyttää tiedoston globaalisti. Ainoa haittapuoli on, että tiedostoa ei tallenneta välimuistiin, koska selain käsittelee sitä koodina eikä kuvana.



Kuinka luoda SVG-sprite

01. Luo kehys

Tätä opetusohjelmaa varten sijoitamme SVG: n verkkosivuston runkoon, mutta näemme, miten se toimii, kun tiedostoa käytetään ulkoisesti. Peruskoodi vaatii SVG-tunnisteen ja tyhjän tag.

kuinka tehdä toistuvia kuvioita Photoshopissa

02. Luo symboli

Sisällä tunnisteen luomme ensimmäisen kuvakkeen käyttämällä symbolitunnistetta, meidän on annettava kuvakkeelle tunnus ja viewBox määritteet. Sisällä annamme otsikon ja muodot kuvakkeemme muodostamiseksi.

Facebook

03. Toistaa

Nyt olemme luoneet ensimmäisen kuvakkeen, teemme saman myös muille. Varmista, että annat yksilöllisen tunnuksen ja tunnuksen viewBox määritteen.



... ...

04. Käytä kuvaketta

Nyt olemme määrittäneet kaikki kuvakkeet, voimme vetää ne ulos ja käyttää niitä sivulla missä tarvitsemme niitä.

Jotta voisimme käyttää spriteä ulkoisena tiedostona, meidän on päivitettävä käyttöelementti viittaamaan tiedostoon ja sitten ID: hen.

05. Luokan nimet

Voimme toistaa edellisen vaiheen kaikkien kuvakkeiden tulostamiseksi. Jos käärimme -merkki kuvakkeen ympärille ja lisää luokkia molempiin ja voimme muotoilla kuvakkeitamme CSS: llä.

06. CSS

Nyt meillä on kuvakkeet ja heillä on yksilölliset luokkien nimet, voimme soveltaa eri täyttövärejä kuhunkin kuvakkeeseemme.

.icon--facebook { fill: #3b5998; } .icon--twitter { fill: #1da1f2; } .icon--linkedin { fill: #0077b5; }

Tämä artikkeli julkaistiin alun perin Web Designer -lehden numerossa 267. Tilaa Web Designer täällä .

Aiheeseen liittyvät artikkelit:

Tämänhetkinen sivu: Spriteiden voima

kuinka pitää lyijykynää piirtämistä varten
Edellinen sivu Lisää animaatio SVG: hen