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.
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.
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:
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:
Odabir teksta na putu u SVG datoteci u pregledniku Safari
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.
Šum na slikama sastoji se od bilo kakve zrnatosti ili teksture koja se javlja. Filtri šuma, kao što je dodatak za Photoshop CS6 Add Noise, proizvode nasumične teksture i zrnatost na slici.
Saznajte kako koristiti Adobe Illustrator CC za izradu neobičnih oblika teksta. Uzmite u obzir nove tehnike za prilagodbu teksta u različitim oblicima.
Naučite kako uvesti fotografije koje se već nalaze na vašem tvrdom disku, kao i nove fotografije iz memorijskih kartica u Adobe Lightroom Classic.
Jednostavan i praktičan način za stvaranje redaka i stupaca teksta pomoću opcija vrste područja u Adobe Creative Suite (Adobe CS5) Illustrator. Ova značajka omogućuje fleksibilno oblikovanje teksta.
Otkrijte kako očistiti crtano skeniranje u Adobe Photoshop CS6 koristeći npr. Threshold alat. Uklonite pozadinske boje i artefakte za savršene crno-bijele slike.
Kada uređujete fotografije i portrete u Photoshopu CC, ispravite efekt crvenih očiju s lakoćom. Ovaj vodič pruža korak po korak upute za učinkovito korištenje alata za ispravanje crvenih očiju.
Otkrijte kako spremiti svoj Adobe Illustrator CS6 dokument u PDF format sa detaljnim koracima i savjetima. Sačuvajte svoje radove i olakšajte dijeljenje s drugima uz PDF format.
Rješavanje rezolucije slike u Photoshopu je ključno za kvalitetu ispisa. U ovom članku pružamo korisne informacije o promjeni razlučivosti slike i savjetima za optimizaciju.
Naučite kako primijeniti transparentnost na SVG grafiku u Illustratoru. Istražite kako ispisati SVG-ove s prozirnom pozadinom i primijeniti efekte transparentnosti.
Nakon što uvezete svoje slike u Adobe XD, nemate veliku kontrolu nad uređivanjem, ali možete mijenjati veličinu i rotirati slike baš kao i bilo koji drugi oblik. Također možete jednostavno zaokružiti kutove uvezene slike pomoću kutnih widgeta. Maskiranje vaših slika Definiranjem zatvorenog oblika […]
