Hvernig á að búa til SVG með stigstærð, leitanleg gerð

SVG gerð veitir sömu verðmætu eiginleika og finnast í öllum þáttum SVG grafík sem búin er til í Adobe Illustrator CC : sveigjanleika, breytanleika í Illustrator og innbyggður stuðningur í öllum vöfrum. Þessir eiginleikar í sjálfu sér færa rök fyrir því að flytja út grafískt efni þitt sem inniheldur tegund á SVG sniði þegar það er miðað við stafræna þróun.

Jafnvel umfram þá kosti sem þú hefur þegar þú notar SVG fyrir grafík almennt, eru nokkrir sérstakir eiginleikar tiltækir þegar þú hefur skrifað inn þessa grafík.

Nýttu þér gildi skalanlegrar, leitarhæfrar tegundar

Eins og þú gætir hafa tekið eftir, þá er ég spenntur fyrir því að SVG tegund, þegar hún er opnuð í vafraglugga, er hægt að leita með vafranum. Venjulega vinna þessi vafraleitartæki aðeins með HTML gerð.

Og SVG tegund er ekki aðeins hægt að leita; notendur geta fundið texta á síðu, afritað og límt og flett upp efni. Til dæmis, ef gestur á safabar hefur áhuga á því hvort grænkálshristingarnir innihaldi sítrónusafa eða ekki, getur hann leitað að þeim texta í SVG skránni, eins og sýnt er hér.

Leitar að SVG grafík að texta í Chrome.

Eða fyrir það mál, ef notandi er ekki viss um hvað í fjandanum grænkál er, getur hann valið textann og leitað að skilgreiningu, eins og sýnt er.

Velja gerð í SVG grafík í vafra

Til að hringja aðeins aftur geturðu flutt út Illustrator grafík sem inniheldur tegund fyrir skjái sem PNG, GIF eða JPEG. En þeir verða ekki skalanlegir og þeir munu ekki halda þeirri gerð virkni sem sýnd er í fyrri tveimur myndunum.

Fínstilltu gerð virkni með því að vista SVG

Ég mun fljótlega snúa aftur til hvenær og hvernig á að vista SVG skrár og flytja út í SVG. En á meðan við erum að fjalla um SVG gerð, þá þarftu að vita að til að láta SVG gerð hegða sér á þann hátt sem sýnt hefur verið fram á, verður þú að vista grafíkina þína sem SVG. Og þú verður að nota sérstakar stillingar þannig að tegundin virki eins og hún á að gera þegar SVG myndin er skoðuð í vafra.

Til að vista tegund innan myndar sem SVG tegund, fylgdu þessum skrefum:

1. Með grafíkina þína tilbúinn til að afhenda vefhönnuði skaltu velja File→ Save As. Farðu í möppuna þar sem þú vilt vista skrána og sláðu inn skráarnafn.

Haltu skráarnöfnum vefsamhæfðum, sem þýðir að nota lágstafi og tölustafi, ekki nota sérstafi (nema strik og undirstrik) og örugglega ekki nota bil.

Ef þú ert að endurvista skrá sem þú hefur þegar vistað á öðru sniði geturðu haldið skráarnafni þínu og staðsetningu og farið í skref 2.

2. Í fellivalmyndinni snið í vista glugganum, veldu SVG og smelltu á Vista.

SVG Options glugginn opnast.

3. Láttu SVG sniðin vera stillt á SVG 1.1 (núverandi útgáfa, studd af öllum vöfrum.

Hinir valkostirnir eru ekki mikilvægir fyrir það sem við erum að gera hér, en í stuttu máli eru þeir eftirfarandi:

• • Undirstillingarmöguleiki: Skildu undirstillingu stillta á Engin. Hinir valkostirnir eru ekki virkir fyrir SVG gerð fyrir vefinn.
  • Staðsetningarvalkostir myndar: Þessir valkostir eiga aðeins við ef þú hefur fellt inn eða tengt (eða bæði) listaverk í Illustrator skrána þína.
  • Valmöguleikar CSS Eiginleika: Ég lýsi CSS Eiginleikum síðar í þessum kafla, en stutta skýringin er sú að þeir eru ákvörðuð af þörfum þróunaraðilans sem þú ert að afhenda skrárnar til. Þegar þú ert að vista gerð sem SVG geturðu notað hvaða CSS eiginleika sem er.

4. Í neðri hluta í Advanced Options valmyndinni skaltu afvelja Output Fewer Elements og Use Element for Text on Path.

Athugaðu að þessir valkostir eru valdir sjálfgefið. Þessi hluti af SVG Options glugganum ætti að líta út eins og eftirfarandi mynd.

Vistar SVG grafík til að varðveita sérstaka gerðaeiginleika.

Að afvelja þessa valkosti gæti aukið skráarstærðina örlítið, en með því að afvelja þá varðveitirðu hvernig texti lítur út og eiginleikana sem ég hef verið að monta mig af í þessum hluta (leitanleiki, afrita-og-líma, fletta upp í vafra og aðrir eiginleikar, fer eftir vafraumhverfi).

Móttækilegur gátreiturinn er valinn sjálfgefið. Þessi stilling er ekki mikilvæg til að varðveita sérstaka eiginleika SVG gerð. Hér, eins og með flesta valkosti, fer val þitt eftir þörfum vefframleiðandans þíns. Ef þú ert í vafa, er það úttaksvalkostur sem er víða við hæfi að skilja eftir Móttækilegur valmöguleikann.

5. Smelltu á OK í SVG Options glugganum til að vista skrána sem innfellanlegt SVG.

Nokkrar athugasemdir um SVG gerð:

• Þegar þetta er skrifað er stuðningur við alla eiginleika SVG gerð í vinnslu. Grunneiginleikarnir sem ég hef farið í gegnum hér virka í hvaða vafra sem er, en stuðningur við mismunandi leturgerðir gæti þurft smá lagfæringar á kóða af samstarfsaðila þínum í vefhönnuði.
• Ertu að velta því fyrir þér hvort þessir flottu val-, breytinga- og leitaraðgerðir SVG texta eigi við um texta á feril? Svarið kemur fram á eftirfarandi mynd. Spoiler: Já!

Velja texta á slóð í SVG skrá í Safari vafra

Bættu kóðabútum við SVG grafík

Illustrator mun aldrei vera besti kóðaritstjóri nokkurs manns, en hann inniheldur þó smá flottan eiginleika til að tengja kóða við þætti í SVG skrá. Við skulum skoða fljótt hvernig á að bæta við kóðabút þegar þú vilt bæta við hlekk á hluta af SVG grafík. Skrefin hér að neðan ganga í gegnum það að úthluta JavaScript á hlut sem mun láta þann hlut virka eins og tengil.

1. Þegar hlut er valinn skaltu skoða SVG Interactivity spjaldið.

Þú getur birt þetta spjald ef það er ekki virkt með því að velja Gluggi → SVG gagnvirkni.

2. Skildu viðburðinn stillt á sjálfgefið, Onclick.

Þessi JavaScript skipun framkvæmir aðgerð (láttu eitthvað gerast) þegar notandi smellir á valinn hlut á vefsíðu.

3. Í JavaScript reitnum, notaðu þessa setningafræði til að skilgreina tengimarkmið:

window.open("[URL]");

Svo, til dæmis, ef þú værir að tengja á Wikipedia síðuna um grænkál, þá væri öll kóðalínan það sem ég hef á myndinni:

window.open("https://en.wikipedia.org/wiki/Kale");

4. Vistaðu Illustrator skrána sem SVG skrá.

Að hengja bút af JavaScript við SVG skrá til að búa til smellanlegan hlekk í myndinni.

Skráin er tilbúin til að afhenda vefhönnuðinum þínum. (Eða ef það er annað hlutverk þitt geturðu skipt um hatta og tekið upp skrána í uppáhalds kóðaritlinum þínum til að samþætta hana í vefverkefni).

Að öðrum kosti geturðu einfaldlega fellt vistuðu SVG skrána inn á vefsíðu. Tengillinn verður ekki glæsilegur (þar til að vefhönnuður fínstillir CSS sem búið er til, mun hann ekki innihalda dæmigert tenglatákn þegar hann er til dæmis færður yfir). En það mun virka og það mun örugglega vera nothæft fyrir frumgerð og prófun áður en vefsíðan er endanleg.

Ekki reyna að nota sneiðtækni Illustrator til að vista SVG skrár. Tæknin á bak við sneiðar er raster-undirstaða og passar ekki við vektor-undirstaða úttak.