SVG täielik juhend

Lehekülg 6/6: Spritide jõud

Spritide jõud

SVG võimaldab meil luua ikoone eraldusvõimest sõltuvas failivormingus, mis on vinge, kuid HTTP-protokolli piirangute tõttu ei soovi me oma veebisaidi iga ikooni jaoks uut failitaotlust teha. Varsti muutub see HTTP / 2 protokolliga.

Vältimaks iga ikooni kohta eraldi taotlust, võime minna tagasi oma vana sõbra sprite juurde, välja arvatud seekord SVG. Sprite'i loomiseks SVG-s kasutame tag ja lisage hilisemaks viitamiseks ID ja viewBox atribuut lõuendi suuruse määramiseks. Sümboliikooni sees loome kujundid, teksti ja muud elemendid, millest meie ikoon koosneb.

Sümboli sildi sisse võime lisada ka juurdepääsetavuse huvides täiendavaid elemente, näiteks ja sildid. Loome ikoonid a sisse et neid hilisemaks kasutamiseks määratleda ja tagada, et neid lehele ei väljastata.

SPG-de loomiseks on mitmeid viise. Neid saab luua vektoritarkvara abil - näiteks Adobe Illustrator CC või Sketch - asetades ikoonid lihtsalt tahvlile ja eksportides faili SVG-na. Kuid nende toodetud kood vajab ikoonisüsteemina kasutamiseks mõningast redigeerimist. Teine võimalus on luua ikoonisüsteem käsitsi. See ei ole liiga keeruline ja teil on märgistuse üle täielik kontroll. SVG spritid saab lisada ka ehituskomplektidesse, näiteks gulp või grunt, kusjuures valite kausta, mis sisaldab SVG-faile, ja konfigureerite ehitise ühe SVG-spraidi väljastamiseks.

Kui oleme oma SVG sprite'i loonud või genereerinud, saame seda kasutada paaril viisil. Saime faili sisu kopeerida ja panna oma lehe ülaossa - seda nimetatakse liini lisamiseks. Teise võimalusena, kui kasutame php-d, võiksime kasutada ka file_get_contents () funktsioon faili globaalseks kaasamiseks. Ainus negatiivne külg on see, et faili ei salvestata vahemällu, kuna brauser käsitleb seda koodina, mitte pildina.

Kuidas luua SVG sprite

01. Looge raamistik

Selle õpetuse jaoks paigutame SVG veebisaidi kere sisse, kuid näeme, kuidas see faili väliselt kasutades töötab. Põhikood nõuab SVG-märgendit ja tühja silt.

02. Looge meie sümbol

Toas sildi loome sümbolimärgendi abil oma esimese ikooni, peame andma ikoonile ID ja viewBox atribuudid. Seestpoolt pakume ikooni moodustamiseks pealkirja ja kujundeid.

Facebook

03. Korda

Nüüd oleme loonud oma esimese ikooni, sama teeme ka ülejäänud nende jaoks. Esitage kindlasti kordumatu ID ja lisage viewBox atribuut.

... ...

04. Kasutage ikooni

Nüüd oleme kõik oma ikoonid määratlenud, saame need välja tõmmata ja kasutada lehel kõikjal, kus vajame.

Sprite'i kasutamiseks välise failina peame värskendama kasutuselementi, et viidata failile ja seejärel ID-le.

05. Klasside nimed

Kõigi meie ikoonide väljastamiseks võime eelmist sammu korrata. Kui me mähkime ikooni ümber silt ja lisage klassid mõlemasse ja saame CSS-iga oma ikoone kujundada.

06. CSS

Nüüd on meil oma ikoonid ja neil on individuaalsed klasside nimed, saame oma ikoonidele rakendada erinevaid täitevärve.

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

See artikkel ilmus algselt ajakirja Web Designer 267. numbris. Telli veebidisainer siit .

Seotud artiklid:

Käesolev lehekülg: Spritide jõud

Eelmine leht Lisage SVG-le animatsioon