Miten SVG-spritejä luodaan ja hallitaan

SVG on voittanut kilpailun, kun kyse on grafiikasta, joka skaalautuu verkossa. Suunnittelijat ja kehittäjät valitsevat SVG: n sijasta kuvakkeiden fontteja, rasterikuvia ja rasterivärejä.

SVG: n käytön edut ovat lukuisia, mutta minulle se on pienempi kuin skaalautuvuus.

SVG: n käyttäminen voi olla niin yksinkertaista kuin viedyn koodin kopioiminen ja liittäminen vektoripohjaisesta ohjelmasta. Sieltä ongelma on toimittaa nämä grafiikat tehokkaimmalla tavalla.

Anna SVG-sprites. Nämä toimivat samankaltaisella kuvitteella kuin kuvaviesteillä, mutta kuitenkin, miten ne luodaan ja sisällytetään verkkosivulle, on hyvin erilainen.

Miksi käytät Spritejä lainkaan?

Sprites auttaa lisäämään nopeutta, ylläpitämään johdonmukaista kehitystyötä ja luomaan kuvakkeet paljon nopeammin. SVG-spritsejä luodaan yleensä samanlaisen muodon tai muodon kuvakkeiden avulla, kun taas suuremman kuvan graafit ovat kertaluonteisia sovelluksia.

Monissa tapauksissa kuvakekirjasto skaalautuu kooltaan. Uusien kuvakkeiden lisäämisen on oltava tehokasta ja lopulta helppoa. SVG-spritit auttavat tekemään tämän todellisuuden.

SVG-koodin vienti

SVG: itä voidaan viedä suosikki vektori-graafisesta ohjelmasta. Käytän yleensä työkalujen yhdistelmää ja olen havainnut, että kaikilla niillä on suuri tuki SVG-viemien vientiä varten. Luonnos erottuu erityisesti, koska voit valita kuvakkeen tai graafisen ja paina komento + c, ja että SVG-koodi kopioidaan leikepöydälle. Sitten voit siirtyä koodinmuokkausohjelmaan, liittää koodin ja näyttää grafiikan silmiesi edessä selaimessa.

SVG: n optimointi Webille

Valitettavasti jos haluat kopioida ja liittää Sketchista, saatat huomata, että koodi on epätarkka ja se voidaan optimoida paremmin. Siihen on joitain työkaluja.

Jos käytät erityisesti Sketchiä, tutustu SVGO-kompressori-plugin . Kun viet SVG-tiedostoja, plugin optimoi ne automaattisesti ennen tiedostojen tallentamista.

Jos et käytä piirrosta, tutustu samaan toimintoon app-lomake tai jos haluat web apps, Jake Archibald koota yksi sinulle .

SVG Spritteiden luominen käsin

SVG sprite voidaan luoda manuaalisesti. Tarvitset vektorisuunnitteluohjelman, joka voi tuottaa SVG-koodin. Tätä varten käytän Sketchia ja vien muutama kuvake SVG: ksi.

Kun olet vienyt kuvakkeet ja suorittanut ne SVGO-kompressori-laajennuksen kautta, jätän seuraavat tiedot kutakin kuvaketta varten. Huomaa, että tässä kohdassa kukin kuvake on erillinen tiedosto:

Nyt, kun SVG: t ovat kaikki optimoidut, voimme aloittaa spriteen luomisen yllä olevan koodin avulla. Luodaksesi sprite alkaa ympäröivästä

Huomaa, miten SVG: llä on näyttötyyppi: ei mitään . Tämä on tarpeen, jotta SVG-spritsejä voidaan käyttää oikein. Vaikka kuvakkeet eivät näytä sivulle, suuri määrä tilaa. Välttääksemme tämän ylimääräisen tilan SVG luo, kätemme SVG: n CSS: llä.

Yksinkertaisesti koodin lisääminen kuvakkeista ei riitä tässä vaiheessa. Meidän on käytettävä a elementti, jonka avulla voit upottaa SVG-koodin sekä toimittaa sen oman näkymänBox- attribuutin, joka on tärkeä kuvakkeille, jotka saattavat näkyä eri leveydellä ja korkeudella.

Elementtien sisällä määritetyt elementit elementti voidaan antaa vain selaimelle, kun viitataan elementti.

Lopullinen sprite muistuttaa seuraavaa koodinpätkää:

Huomaa, kuinka olen lisännyt id- attribuutit kullekin symbolielementille. Tämä on tärkeää, koska kun viitataan tiettyyn kuvakkeeseen spriteissä, tarvitset ainutlaatuisen tavan kohdistaa siihen. Huomaa myös, miten jokaisella kuvakkeella on oma ainutlaatuinen viewBox- parametri. Ensimmäiset kaksi parametria ovat lähes aina "0 0"; kaksi muuta ovat yhtä kuin viennin kuvake.

Sisältää sivun kuvakkeen

Kun sprite on valmis menemään, tarvitsemme tapaa lisätä tiettyjä kuvakkeita sivulle. Voit tehdä tämän käytät elementti kirjoitettu näin:

Sivullasi pitäisi näkyä kuvake, ja se on todella siinä!

SVG Spritesin automaattinen aktivointi

Luominen inline SVG sprites ei ole niin vaikeaa. Ongelmana on se, että monet kehittäjät tarvitsevat luoda spritseja sadoille kuvakkeille tai enemmän vankka sovelluksia varten. Tällaisen käsin luominen voi saada aikaa vievää ja tylsiä. Kehittäjät tarvitsevat tapa automatisoida prosessin, jotta he eivät tuhlaa aikaa luo spritsejä käsin.

Onneksi on työkaluja tällaiseen asiaan. Tehtävien hallinta kuten ähkyä tai Kulaus Käytettävissä on lisäosia. Nämä tehostavat SVG-spritsien luomista. Toimittamalla jokaisen SVG-tiedoston tiettyyn hakemistoon plugin optimoi ja tuottaa kaikki SVG: t viitattuna hakemistossasi, jotta ne sisällytetään tuoreeseen uuteen spriteeseen.

Jos haluat lisätä lisää kuvakkeita spriteeseen, kaikki mitä sinun tarvitsee tehdä on viedä kuvake SVG: ksi ja lisää se samaan kansioon. Sieltä plugin käsittelee aikaa vievää osaa.

Jotkut käytettävissä olevat lisäosat eri makuissa: ähkyä-svgstore , kulauksella-svg-sprite , svg-sprite .

johtopäätös

Kuten kaikessa web-kehitystyössä, on olemassa useita tapoja luoda SVG-spritseja. Voit viitata niihin ulkoisesti, sisällyttää ne CSS: n kautta , ja jopa tehdä niistä herkkä .