Si të krijoni SVG me Lloj të shkallëzuar, të kërkueshëm

Lloji SVG ofron të njëjtat veçori të vlefshme që gjenden në të gjitha aspektet e grafikëve SVG të krijuara në Adobe Illustrator CC : shkallëzueshmëri, redaktueshmëri në Illustrator dhe mbështetje vendase në të gjithë shfletuesit. Këto veçori në vetvete argumentojnë për eksportimin e përmbajtjes tuaj grafike që përmban llojin në formatin SVG kur synohet për zhvillimin dixhital.

Edhe përtej avantazheve që keni kur përdorni SVG për grafikë në përgjithësi, disa veçori të veçanta janë të disponueshme kur shkruani ato grafika.

Shfrytëzojeni vlerën e llojit të shkallëzuar, të kërkueshëm

Siç mund ta keni vënë re, unë jam i ngazëllyer për faktin se lloji SVG, kur hapet në një dritare të shfletuesit, është i kërkueshëm me shfletuesin. Zakonisht këto mjete kërkimi të shfletuesit funksionojnë vetëm me llojin HTML.

Dhe lloji SVG nuk është vetëm i kërkueshëm; përdoruesit mund të gjejnë tekst në një faqe, të kopjojnë dhe ngjitin dhe të kërkojnë përmbajtje. Për shembull, nëse një vizitor në një bar lëngjesh është i interesuar nëse kale shakes kanë lëng limoni ose jo, ai mund të kërkojë në skedarin SVG për atë tekst, siç tregohet këtu.

Duke kërkuar një grafik SVG për tekst në Chrome.

Ose për këtë çështje, nëse një përdorues nuk është i sigurt se çfarë është lakra jeshile, ai mund të zgjedhë tekstin dhe të kërkojë një përkufizim, siç tregohet.

Zgjedhja e llojit në një grafik SVG në një shfletues

Për të thirrur pak, mund të eksportoni grafikë të Illustrator që përfshijnë llojin për ekranet si PNG, GIF ose JPEG. Por ato nuk do të jenë të shkallëzueshme dhe nuk do të ruajnë llojin e funksionalitetit të tipit të demonstruar në dy figurat e mëparshme.

Optimizoni funksionalitetin e tipit duke ruajtur SVG

Do të kthehem së shpejti se kur dhe si të ruhen skedarët SVG dhe të eksportohen në SVG. Por ndërsa jemi në temën e llojit SVG, duhet të dini se për të bërë që lloji SVG të sillet në mënyrën e demonstruar, duhet ta ruani grafikun tuaj si një SVG. Dhe duhet të përdorni cilësime specifike në mënyrë që lloji të veprojë ashtu siç supozohet kur imazhi SVG shihet në një shfletues.

Për të ruajtur llojin brenda një imazhi si lloj SVG, ndiqni këto hapa:

1. Me grafikun tuaj gati për t'ia dorëzuar një zhvilluesi të uebit, zgjidhni Skedar → Ruaj si. Shkoni te dosja ku dëshironi të ruani skedarin dhe futni një emër skedari.

Mbajini emrat e skedarëve të pajtueshëm me ueb-in, që do të thotë të përdorni shkronja të vogla dhe numra, mos përdorni karaktere speciale (përveç vizës dhe nënvizimit) dhe definitivisht mos përdorni hapësira.

Nëse po ruani një skedar që e keni ruajtur tashmë në një format tjetër, mund të mbani emrin dhe vendndodhjen e skedarit dhe të kaloni te Hapi 2.

2. Në drop-down format në dialogun Ruaj, zgjidhni SVG dhe klikoni Ruaj.

Hapet dialogu i opsioneve SVG.

3. Lëreni Profilet SVG të vendosur në SVG 1.1 (versioni aktual, i mbështetur nga të gjithë shfletuesit.

Opsionet e tjera nuk janë kritike për atë që po bëjmë këtu, por shkurtimisht ato janë si më poshtë:

• • Opsioni i nëncilësimeve: Lëreni Nëncilësimin të caktuar në Asnjë. Opsionet e tjera nuk janë operative për llojin SVG për ueb.
  • Opsionet e vendndodhjes së imazhit: Këto opsione janë të zbatueshme vetëm nëse keni ngulitur ose lidhur (ose të dyja) vepra arti në skedarin tuaj Illustrator.
  • Opsionet e CSS Properties: Unë i përshkruaj opsionet CSS Properties më vonë në këtë kapitull, por shpjegimi i shkurtër është se ato përcaktohen nga nevojat e zhvilluesit të cilit po i dorëzoni skedarët. Kur po ruani llojin si SVG, mund të përdorni cilindo nga opsionet CSS Properties.

4. Në seksionin e poshtëm të dialogut "Opsione të avancuara", çaktivizoni "Dalje më pak elemente" dhe "Përdor elementin për tekst në shteg".

Vini re se këto opsione janë zgjedhur si parazgjedhje. Ky seksion i dialogut tuaj të opsioneve SVG duhet të duket si figura e mëposhtme.

Ruajtja e një grafike SVG për të ruajtur tiparet e tipit të veçantë.

Zgjedhja e këtyre opsioneve mund të rrisë pak madhësinë e skedarit, por duke i çzgjedhur ato, ju ruani pamjen e tekstit dhe vetitë për të cilat jam mburrur në këtë seksion (kërkueshmëria, kopjimi dhe ngjitja, kërkimi në shfletues dhe veçori të tjera, në varësi të mjedisit të shfletimit).

Kutia e kontrollit Responsive zgjidhet si parazgjedhje. Ky cilësim nuk është kritik për ruajtjen e atributeve të veçanta të llojit SVG. Këtu, si me shumicën e opsioneve, zgjedhja juaj varet nga nevojat e zhvilluesit tuaj të internetit. Kur dyshoni, lënia e opsionit Responsive është një opsion i zbatueshëm gjerësisht i daljes.

5. Klikoni OK në dialogun SVG Options për të ruajtur skedarin si një SVG të integruar.

Disa shënime për llojin SVG:

• Që nga ky shkrim, mbështetja për të gjitha tiparet e llojit SVG është një punë në progres. Veçoritë bazë që kam përshkuar këtu funksionojnë në çdo shfletues, por mbështetja për shkronja të ndryshme mund të kërkojë disa modifikime të kodit nga partneri juaj i zhvilluesit të uebit.
• A po pyesni nëse ato veçori të bukura të përzgjedhjes, modifikimit dhe kërkimit të tekstit SVG zbatohen për tekstin në një kurbë? Përgjigja tregohet në figurën e mëposhtme. Spoiler: Po!

Zgjedhja e tekstit në një shteg në një skedar SVG në shfletuesin Safari

Shtoni copa kodi në grafikat SVG

Illustrator nuk do të jetë kurrë redaktori më i mirë i kodit të askujt, por ai përfshin një veçori të vogël interesante për lidhjen e kodit me elementët e një skedari SVG. Le të hedhim një vështrim të shpejtë se si të shtoni një copë kodi kur dëshironi të shtoni një lidhje në një pjesë të një grafike SVG. Hapat e mëposhtëm kalojnë në caktimin e JavaScript për një objekt që do ta bëjë atë objekt të funksionojë si një lidhje.

1. Me një objekt të zgjedhur, shikoni panelin SVG Interactivity.

Ju mund ta shfaqni këtë panel nëse nuk është aktiv duke zgjedhur Window→SVG Interactivity.

2. Lëreni Ngjarje të vendosur në parazgjedhje, Onclick.

Kjo komandë JavaScript kryen një funksion (të bëjë diçka të ndodhë) kur një përdorues klikon objektin e zgjedhur në një faqe interneti.

3. Në kutinë JavaScript, përdorni këtë sintaksë për të përcaktuar një objektiv lidhjeje:

window.open ("[URL]");

Kështu, për shembull, nëse do të lidheshit me faqen e Wikipedia në kale, linja e plotë e kodit do të ishte ajo që kam në figurë:

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

4. Ruani skedarin Illustrator si skedar SVG.

Bashkëngjitja e një fragmenti JavaScript në një skedar SVG për të krijuar një lidhje të klikueshme në grafik.

Skedari është gati për t'ia dorëzuar zhvilluesit tuaj të uebit. (Ose nëse ky është roli juaj tjetër, mund të ndryshoni kapele dhe të merrni skedarin në redaktuesin tuaj të preferuar të kodit për ta integruar në një projekt ueb).

Përndryshe, thjesht mund të futni skedarin e ruajtur SVG në një faqe interneti. Lidhja nuk do të jetë elegante (derisa një projektues ueb të modifikojë CSS-në e krijuar, ajo nuk do të përfshijë një ikonë tipike lidhjeje, për shembull, kur rri pezull). Por do të funksionojë, dhe do të jetë patjetër i përdorshëm për prototipimin dhe testimin përpara se faqja e internetit të finalizohet.

Mos provoni të përdorni teknikën e ndarjes së Illustrator për ruajtjen e skedarëve SVG. Teknologjia pas fetave është e bazuar në raster dhe nuk lidhet me daljen e bazuar në vektor.