Kako ustvariti SVG z razširljivo vrsto, ki jo je mogoče iskati

Vrsta SVG ponuja enake dragocene funkcije, ki jih najdemo v vseh vidikih grafike SVG, ustvarjene v Adobe Illustrator CC : razširljivost, možnost urejanja v Illustratorju in izvorna podpora v vseh brskalnikih. Te funkcije same po sebi zagovarjajo izvoz vaše grafične vsebine, ki vsebuje vrsto v formatu SVG, kadar je namenjena digitalnemu razvoju.

Tudi poleg prednosti, ki jih imate, ko uporabljate SVG za grafiko na splošno, so na voljo nekatere posebne funkcije, ko vnesete te grafike.

Izkoristite vrednost razširljive vrste, ki jo je mogoče iskati

Kot ste morda opazili, sem navdušen nad dejstvom, da je tip SVG, ko se odpre v oknu brskalnika, mogoče iskati z brskalnikom. Običajno ta iskalna orodja brskalnika delujejo samo z vrsto HTML.

In tip SVG ni mogoče samo iskati; uporabniki lahko najdejo besedilo na strani, kopirajo in prilepijo ter poiščejo vsebino. Na primer, če obiskovalca sokovnega bara zanima, ali napitki iz ohrovta vsebujejo limonin sok, lahko poišče to besedilo v datoteki SVG, kot je prikazano tukaj.

Iskanje besedila v grafiki SVG v Chromu.

Ali pa, če uporabnik ni prepričan, kaj za vraga je ohrovt, lahko izbere besedilo in poišče definicijo, kot je prikazano.

Izbira vrste v grafiki SVG v brskalniku

Če želite malo poiskati nazaj, lahko izvozite grafiko Illustratorja, ki vključuje vrsto za zaslone kot PNG, GIF ali JPEG. Vendar ne bodo razširljivi in ​​ne bodo ohranili funkcije tipa, prikazane na prejšnjih dveh slikah.

Optimizirajte funkcionalnost vrste s shranjevanjem SVG

Kmalu se bom vrnil k temu, kdaj in kako shraniti datoteke SVG in izvoziti v SVG. Toda medtem ko smo pri temi vrste SVG, morate vedeti, da morate svojo grafiko shraniti kot SVG, če želite, da se tip SVG obnaša na prikazan način . Uporabiti morate posebne nastavitve, da tip deluje tako, kot naj bi, ko se slika SVG gleda v brskalniku.

Če želite shraniti vrsto znotraj slike kot vrsto SVG, sledite tem korakom:

1. Ko je vaša grafika pripravljena za predajo spletnemu razvijalcu, izberite Datoteka→ Shrani kot. Pomaknite se do mape, kamor želite shraniti datoteko, in vnesite ime datoteke.

Imena datotek naj bodo spletna združljiva, kar pomeni uporabo malih črk in številk, ne uporabljajte posebnih znakov (razen pomišljaja in podčrtaja) in vsekakor ne uporabljajte presledkov.

Če znova shranjujete datoteko, ki ste jo že shranili v drugo obliko zapisa, lahko obdržite ime datoteke in lokacijo ter pojdite na 2. korak.

2. V spustnem meniju formata v pogovornem oknu Shrani izberite SVG in kliknite Shrani.

Odpre se pogovorno okno Možnosti SVG.

3. Profile SVG pustite nastavljene na SVG 1.1 (trenutna različica, ki jo podpirajo vsi brskalniki.

Druge možnosti niso ključne za to, kar počnemo tukaj, vendar so na kratko naslednje:

• • Možnost podnastavitve: pustite Podnastavitev nastavljeno na Brez. Druge možnosti ne delujejo za vrsto SVG za splet.
  • Možnosti lokacije slike: te možnosti so uporabne samo, če ste v datoteko Illustrator vdelali ali povezali (ali oboje) umetniško delo.
  • Možnosti lastnosti CSS: Možnosti lastnosti CSS opisujem pozneje v tem poglavju, a kratka razlaga je, da so določene s potrebami razvijalca, ki mu predajate datoteke. Ko shranjujete vrsto kot SVG, lahko uporabite katero koli od možnosti lastnosti CSS.

4. V spodnjem delu pogovornega okna Napredne možnosti počistite izbor možnosti Izhodi manj elementov in Uporabi element za besedilo na poti.

Upoštevajte, da so te možnosti izbrane privzeto. Ta razdelek pogovornega okna Možnosti SVG bi moral izgledati kot naslednja slika.

Shranjevanje grafike SVG za ohranitev posebnih tipskih značilnosti.

Če prekličete izbiro teh možnosti, lahko nekoliko povečate velikost vaše datoteke, vendar če jih prekličete, ohranite videz besedila in lastnosti, s katerimi sem se hvalil v tem razdelku (možnost iskanja, kopiranje in lepljenje, iskanje v brskalniku in druge funkcije, odvisno od okolja brskanja).

Potrditveno polje Odzivno je privzeto izbrano. Ta nastavitev ni ključna za ohranjanje posebnih atributov tipa SVG. Tu je, tako kot pri večini možnosti, vaša izbira odvisna od potreb vašega spletnega razvijalca. Če ste v dvomih, je možnost, da izberete možnost Odzivni, široko uporabna možnost izhoda.

5. Kliknite V redu v pogovornem oknu Možnosti SVG, da shranite datoteko kot SVG, ki ga je mogoče vdelati.

Nekaj ​​opomb o vrsti SVG:

• Od tega pisanja je podpora za vse funkcije tipa SVG v teku. Osnovne funkcije, ki sem jih tukaj pregledal, delujejo v katerem koli brskalniku, vendar bo podpora za različne pisave morda zahtevala nekaj prilagajanja kode s strani vašega partnerja spletnega razvijalca.
• Se sprašujete, ali te odlične funkcije izbire, urejanja in iskanja besedila SVG veljajo za besedilo na krivulji? Odgovor je razkrit na naslednji sliki. Spoiler: Ja!

Izbira besedila na poti v datoteki SVG v brskalniku Safari

Dodajte delčke kode grafiki SVG

Illustrator nikoli ne bo nikogar najbolje ocenjen urejevalnik kode, vendar vključuje kul majhno funkcijo za povezovanje kode z elementi datoteke SVG. Oglejmo si na hitro, kako dodati delček kode, ko želite dodati povezavo v del grafike SVG. Spodnji koraki vodijo skozi dodelitev JavaScripta objektu, zaradi katerega bo ta objekt deloval kot povezava.

1. Z izbranim predmetom si oglejte ploščo Interaktivnost SVG.

To ploščo lahko prikažete, če ni aktivna, tako da izberete Okno→ Interaktivnost SVG.

2. Pustite dogodek nastavljen na privzeto Onclick.

Ta ukaz JavaScript izvaja funkcijo (da se nekaj zgodi), ko uporabnik klikne izbrani predmet na spletni strani.

3. V polju JavaScript uporabite to sintakso, da določite cilj povezave:

window.open("[URL]");

Torej, če bi se na primer povezovali na stran Wikipedije o ohrovtu, bi bila celotna vrstica kode tisto, kar imam na sliki:

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

4. Shranite datoteko Illustrator kot datoteko SVG.

Datoteki SVG priložite delček JavaScripta, da v grafiki ustvarite povezavo, ki jo je mogoče klikniti.

Datoteka je pripravljena za predajo vašemu spletnemu razvijalcu. (Ali če je to vaša druga vloga, lahko spremenite klobuke in poberete datoteko v svojem najljubšem urejevalniku kode, da jo integrirate v spletni projekt).

Lahko pa tudi preprosto vdelate shranjeno datoteko SVG v spletno stran. Povezava ne bo elegantna (dokler spletni oblikovalec ne prilagodi ustvarjenega CSS, ne bo vključevala tipične ikone povezave, ko jo na primer premaknete nanjo). Vendar bo delovalo in zagotovo bo uporabno za izdelavo prototipov in testiranje, preden bo spletna stran dokončana.

Ne poskušajte uporabiti Illustratorjeve tehnike rezin za shranjevanje datotek SVG. Tehnologija, ki stoji za rezinami, je rastrska in se ne ujema z vektorskim izhodom.