Hvernig á að búa til og stjórna SVG Sprites

SVG er að vinna keppnina þegar kemur að grafíkum sem mæla á vefnum. Hönnuðir og verktaki eru að velja SVG í stað táknstafna, raster myndir og raster sprites.

Ávinningur af því að nota SVG eru fjölmargir en mér, það kælir niður að sveigjanleika.

Notkun SVG getur verið eins einfalt og að afrita og líma út flutt kóðann úr vettvangsstarfi. Þaðan liggur vandamálið með því að skila þessum grafík á skilvirkan hátt.

Sláðu inn SVG sprites. Þessar aðgerðir í svipuðum mynstri og myndsprite gera þó, hvernig þau eru búin til og með á vefsíðu er mjög mismunandi.

Afhverju notaðuðu fröken yfirleitt?

Sprites hjálpa til við að auka hraða, viðhalda stöðugri vinnuflæði og gera sköpun tákna miklu hraðar. SVG sprites eru venjulega búnar til með táknum af svipaðri mynd eða formi en stærri grafík eru einföld forrit.

Í mörgum tilfellum mun táknmyndasafn mæla í stærð. Að bæta við nýjum táknum þarf að vera duglegur og að lokum auðvelt. SVG sprites hjálpa að gera þetta að veruleika.

Flytja SVG kóða

SVGs geta verið fluttar út úr uppáhalds vektor grafík forritinu þínu. Ég hef tilhneigingu til að nota blöndu af verkfærum og hafa komist að því að allir þeirra hafa mikla stuðning við útflutning á SVGs. Skissa kemur fram sérstaklega vegna þess að þú getur valið táknið eða grafík og smellt á stjórn + c og að SVG númerið sé afritað á klemmuspjaldið þitt. Þá er hægt að fara á kóðann ritara, líma kóðann og hafa grafíkin birtast fyrir augun í vafranum.

Hagræðing SVG fyrir vefinn

Því miður, ef þú átt að afrita og líma frá skissu gætirðu fundið að kóðinn er óaðskiljanlegur og gæti verið betra bjartsýni. Það eru nokkur tæki til þess.

Ef þú notar sérstaklega skissu skaltu skoða SVGO Compressor tappi . Þegar þú útflutningur SVGs hagræðir viðbótin sjálfkrafa þá áður en þú vistar skrána.

Ef þú notar ekki skissu skaltu skoða sömu virkni í app formi eða ef þú vilt vefforrit, Jake Archibald setja saman einn fyrir þig .

Búa til SVG Sprites handvirkt

Búa til SVG sprite er hægt að gera handvirkt. Þú þarft vektorhugbúnað sem getur búið til SVG kóða. Fyrir þetta mun ég nýta Sketch og flytja nokkrar tákn sem SVG.

Eftir að hafa flutt táknin og keyrt þeim í gegnum SVGO Compressor tappann er ég vinstri með eftirfarandi fyrir hvert tákn. Athugaðu að á þessum tímapunkti er hvert tákn sérstakt skrá:

Nú þegar SVG okkar eru öll bjartsýni getum við byrjað að búa til sprite með því að nota kóðann hér fyrir ofan. Til að búa til sprite byrja með nærliggjandi

Takið eftir því hvernig SVG hefur inline stíl sýna: enginn . Þetta er nauðsynlegt til að nýta SVG sprites almennt. Jafnvel þótt táknin muni ekki verða á síðunni mun mikið pláss verða. Til að koma í veg fyrir þennan viðbótarpláss sem SVG skapar erum við að fela SVG með CSS.

Einfaldlega með kóðanum frá táknum mun ekki nægja á þessum tímapunkti. Við verðum að nota a þáttur sem leyfir þér að embed in SVG kóðann auk þess að veita eigin sérstökum viewBox eiginleiki sem er mikilvægt fyrir tákn sem kunna að birtast á mismunandi breiddum og hæðum.

Elements skilgreind inni í Aðeins er hægt að láta þátt í vafranum þegar vísað er af þáttur.

Endanleg sprite líkist eftirfarandi stikli:

Takið eftir því hvernig ég hef bætt við id eiginleika fyrir hvert tákn frumefni. Þetta er mikilvægt vegna þess að þegar þú vísar til ákveðins táknmyndar í sprite þarf þú einstaka leið til að miða á það. Einnig taka eftir því hvernig hvert táknið hefur sitt eigið einstaka útsýniBox breytur. Fyrstu tveir breytur verða næstum alltaf "0 0"; seinni tveir munu jafngilda stærð táknsins sem þú hefur flutt út.

Þar á meðal tákn á síðunni

Með sprite allri tilbúinn til að fara þurfum við leið til að innihalda ákveðnar tákn á síðu. Til að gera þetta mun þú nýta þáttur skrifaður svona:

Á síðunni þinni ættir þú að sjá táknið birtast og það er í raun allt sem það er!

Sjálfvirk SVG Sprites

Búa til inline SVG sprites er ekki allt svo erfitt. Vandamálið liggur við þá staðreynd að margir forritarar þurfa að búa til sprites fyrir hundruð tákn eða meira fyrir öflug forrit. Búa til eitthvað af þessu með hendi gæti orðið tímafrekt og leiðinlegt. Verktaki þarf leið til að gera sjálfvirkan ferlið þannig að þeir eyða ekki tíma til að búa til sprites af hendi.

Til allrar hamingju, það eru verkfæri fyrir slíkt. Verkefnisstjórar eins og Grunt eða Gulp hafa viðbætur sem hægt er að nota. Þetta hagræða stofnun SVG sprites. Með því að veita hverja SVG skrá innan tiltekins möppu mun bæði viðbótin og hagræðingin búa til allar SVG-skrárnar í möppunni sem vísað er til í nýjum sprite.

Ef þú þarft að bæta við fleiri táknum á sprite allt sem þú þarft að gera er að flytja út táknið sem SVG og bæta því við sama möppu. Þaðan tekur tappi tímafrekt hluti.

Sumar tiltækar viðbætur í mismunandi bragði: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Niðurstaða

Eins og með allt í þróun vefur er meira en ein leið til að búa til SVG sprites. Þú getur vísað þeim utan, meðtöldum þeim með CSS , og jafnvel gera þau móttækilegur .