Kako stvoriti SVG-ove s skalabilnim, pretraživim tipom

SVG tip pruža iste vrijedne značajke koje se nalaze u svim aspektima SVG grafike stvorene u Adobe Illustrator CC : skalabilnost, mogućnost uređivanja u Illustratoru i izvornu podršku u svim preglednicima. Te značajke same po sebi zagovaraju izvoz vašeg grafičkog sadržaja koji sadrži tip u SVG formatu kada je namijenjen za digitalni razvoj.

Čak i osim prednosti koje imate kada koristite SVG za grafiku općenito, neke posebne značajke dostupne su kada upišete tu grafiku.

Iskoristite vrijednost skalabilnog tipa koji se može pretraživati

Kao što ste mogli primijetiti, uzbuđen sam zbog činjenice da se SVG tip, kada se otvori u prozoru preglednika, može pretraživati ​​u pregledniku. Obično ti alati za pretraživanje preglednika rade samo s HTML vrstom.

A SVG tip nije samo pretraživ; korisnici mogu pronaći tekst na stranici, kopirati i zalijepiti te tražiti sadržaj. Na primjer, ako posjetitelja soka bara zanima ima li šejkovi od kelja limunov sok ili ne, može pretražiti SVG datoteku za taj tekst, kao što je prikazano ovdje.

Pretraživanje SVG grafike za tekst u Chromeu.

Ili što se toga tiče, ako korisnik nije siguran što je dovraga kelj, može odabrati tekst i potražiti definiciju, kao što je prikazano.

Odabir vrste SVG grafike u pregledniku

Da biste se malo vratili, možete izvesti Illustrator grafiku koja uključuje tip za zaslone kao PNG, GIF ili JPEG. Ali oni neće biti skalabilni i neće zadržati vrstu funkcionalnosti tipa prikazanu na prethodne dvije slike.

Optimizirajte funkcionalnost tipa spremanjem SVG-ova

Uskoro ću se vratiti na to kada i kako spremiti SVG datoteke i izvesti u SVG. No, dok smo na temi tipa SVG, morate znati da morate spremiti svoju grafiku kao SVG kako bi se tip SVG ponašao na prikazani način . I morate koristiti posebne postavke kako bi se tip ponašao onako kako bi trebao kada se SVG slika gleda u pregledniku.

Da biste spremili vrstu unutar slike kao SVG vrstu, slijedite ove korake:

1. Dok je vaša grafika spremna za predaju web programeru, odaberite Datoteka→Spremi kao. Dođite do mape u koju želite spremiti datoteku i unesite naziv datoteke.

Neka nazivi datoteka budu web-kompatibilni, što znači da koristite mala slova i brojeve, ne koristite posebne znakove (osim crtice i podvlake) i definitivno nemojte koristiti razmake.

Ako ponovno spremate datoteku koju ste već spremili u drugi format, možete zadržati naziv datoteke i lokaciju te prijeći na 2. korak.

2. U padajućem izborniku formata u dijaloškom okviru Spremi odaberite SVG i kliknite Spremi.

Otvara se dijaloški okvir SVG opcije.

3. Ostavite SVG profile postavljene na SVG 1.1 (trenutna verzija, podržana od strane svih preglednika.

Ostale opcije nisu kritične za ono što ovdje radimo, ali ukratko su sljedeće:

• • Opcija podpostavke: Ostavite podpostavku postavljenu na Ništa. Ostale opcije nisu operativne za SVG tip za web.
  • Opcije lokacije slike: ove su opcije primjenjive samo ako ste u svoju Illustrator datoteku ugradili ili povezali (ili oboje) umjetničko djelo.
  • Opcije CSS svojstava: Opisujem opcije CSS svojstava kasnije u ovom poglavlju, ali kratko objašnjenje je da su one određene potrebama programera kojemu predajete datoteke. Kada spremate vrstu kao SVG, možete koristiti bilo koju od opcija CSS svojstava.

4. U donjem dijelu dijaloškog okvira Napredne opcije poništite odabir Izlaz manje elemenata i Koristi element za tekst na putu.

Imajte na umu da su ove opcije odabrane prema zadanim postavkama. Ovaj dio vašeg dijaloškog okvira SVG opcija trebao bi izgledati kao na sljedećoj slici.

Spremanje SVG grafike radi očuvanja posebnih značajki tipa.

Poništavanje odabira ovih opcija moglo bi malo povećati veličinu vaše datoteke, ali poništavanjem odabira zadržat ćete kako tekst izgleda i svojstva kojima sam se hvalio u ovom odjeljku (mogućnost pretraživanja, kopiranje i lijepljenje, traženje u pregledniku i druge značajke, ovisno o okruženju pregledavanja).

Potvrdni okvir Responsive odabran je prema zadanim postavkama. Ova postavka nije kritična za očuvanje posebnih atributa tipa SVG. Ovdje, kao i kod većine opcija, vaš izbor ovisi o potrebama vašeg web programera. Ako ste u nedoumici, ostavljanje odabrane opcije Responsive je široko primjenjiva izlazna opcija.

5. Kliknite OK u dijaloškom okviru SVG Options da biste spremili datoteku kao SVG koji se može ugraditi.

Nekoliko napomena o tipu SVG:

• Od ovog pisanja, podrška za sve značajke tipa SVG je u tijeku. Osnovne značajke koje sam ovdje prošetao rade u bilo kojem pregledniku, ali podrška za različite fontove može zahtijevati ugađanje koda od strane vašeg partnera web programera.
• Pitate li se primjenjuju li se te sjajne značajke odabira, uređivanja i pretraživanja SVG teksta na tekst na krivulji? Odgovor se otkriva na sljedećoj slici. Spoiler: Da!

Odabir teksta na putu u SVG datoteci u pregledniku Safari

Dodajte isječke koda u SVG grafiku

Illustrator nikada neće biti ničiji najbolje ocijenjeni uređivač koda, ali uključuje super malu značajku za povezivanje koda s elementima SVG datoteke. Pogledajmo nakratko kako dodati isječak koda kada želite dodati vezu na dio SVG grafike. Koraci u nastavku vode kroz dodjelu JavaScripta objektu koji će učiniti da taj objekt funkcionira kao veza.

1. S odabranim objektom pogledajte ploču SVG interaktivnosti.

Ovu ploču možete prikazati ako nije aktivna odabirom Window→SVG Interaktivnost.

2. Ostavite Događaj postavljen na zadano, Onclick.

Ova JavaScript naredba obavlja funkciju (da se nešto dogodi) kada korisnik klikne odabrani objekt na web stranici.

3. U okviru JavaScript koristite ovu sintaksu za definiranje cilja veze:

window.open("[URL]");

Tako, na primjer, ako se povezujete na stranicu Wikipedije o kaleu, cijeli red koda bio bi ono što imam na slici:

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

4. Spremite Illustrator datoteku kao SVG datoteku.

Prilaganje isječka JavaScripta SVG datoteci za stvaranje veze na koju se može kliknuti u grafici.

Datoteka je spremna za predaju vašem web programeru. (Ili ako je to vaša druga uloga, možete promijeniti šešire i pokupiti datoteku u svom omiljenom uređivaču koda kako biste je integrirali u web projekt).

Alternativno, možete jednostavno ugraditi spremljenu SVG datoteku u web stranicu. Veza neće biti elegantna (sve dok web dizajner ne podesi generirani CSS, neće uključivati ​​tipičnu ikonu veze kada, na primjer, pređete iznad). Ali funkcionirat će i sigurno će biti uslužan za izradu prototipa i testiranje prije nego što web stranica bude finalizirana.

Nemojte pokušavati koristiti Illustratorovu tehniku ​​rezanja za spremanje SVG datoteka. Tehnologija koja stoji iza rezova temelji se na rasteru i ne spaja se s vektorskim izlazom.