Praktični vodič za početnike za SVG
Iako format nije osobito nov, SVG slike sve su popularnije u dizajnu web stranica. Svi glavni preglednici podržavaju format i SVG mijenja način na koji razmišljamo i prikazujemo slike za web.
Zašto kod tako popularnih? I što se točno razlikuje u SVG datoteci? Danas imamo odgovore i sve ostalo što trebate znati kako biste započeli s ovom vrstom datoteka. (Kao mali bonus, sve slike u ovom postu dostupne su u SVG-u s Creative Market-a.)
Istražite elemente Envatoa
Što je SVG?
Skalabilna vektorska grafika ili SVG vektorski je format slike razvijen za web. (Možete saznati više o formatima vektora nasuprot rasterima u prethodnom članku Design Shack.)
Format se povećao na popularnosti zahvaljujući zaslonima visoke razlučivosti na kojima korisnici mogu vidjeti svaki piksel (ako postoji). Budući da je SVG vektorski format, slika se prikazuje na isti način - i sa savršenim detaljima - bez obzira na veličinu.
Jezik za označavanje prvi je razvio World Wide Web Consortium, poznatiji kao W3C, 1999. godine. W3C definira SVG kao „označni jezik za opisivanje dvodimenzionalnih grafičkih aplikacija i slika te skup povezanih sučelja grafičke skripte „. Podržavaju ga svi moderni preglednici - tako da ne morate brinuti hoće li SVG datoteke prikazati ispravno ili ne - i radi bez obzira na vrstu uređaja.
Praktične aplikacije
Dakle, što SVG čini tako popularnim i zašto ga koristi više dizajnera? Jednostavno, jer djeluje.
SVG datoteke su male i skalabilne. Iako je format najprikladniji za oblike, ima razne praktične primjene. Logotip marke, ikone, elementi korisničkog sučelja i mnoštvo drugih bitova dizajna mogu raditi u SVG formatu. Najveći bonus je što su vektori. Dakle, SVG slika se može koristiti u gotovo bilo kojoj veličini. (Neke najsitnije datoteke mogu biti toliko velike.)
SVG datotekama je lako manipulirati i kontrolirati. SVG se ne može spremiti samo kao statična slika, već možete dodati interaktivnost i filtre kako biste sliku učinili još zabavnijom. (SVG datoteke mogu biti animirane i obojene.)
Evo nekoliko praktičnih aplikacija za SVG upotrebu:
- Logotipi ili slike
- Kao pozadinska slika
- Kao objekt, poput gumba
- kartografija
- Grafikoni ili crteži
Općenito je pravilo da SVG najbolje odgovara slikama koje bi se mogle razvijati ili mijenjati s vremenom ili prema vrsti uređaja ili uključuju animaciju ili druge dinamičke efekte. Koristite format za vizualne prikaze kao što su logotipi, skice, oblici, grafike i grafikoni ili druge jednostavne slike.
Prednosti upotrebe SVG-a
Pa zašto biste se odmaknili od pouzdanog JPG-a ili GIF-a do SVG-a? Postoji puno razloga zbog kojih bi se ovaj format mogao najbolje koristiti u vašim projektima. (Postoji čak i potencijal da se SVG koristi i za ispis.)
- SVG je vektorski format. Ovo je samo važno kod razmišljanja o responzivnom dizajnu, gdje se veličine slike često mijenjaju ovisno o uređaju. SVG je dovoljno mali da jedna datoteka može obaviti sav posao i na većim ekranima nema gubitka kvalitete.
- SVG slike i ponašanje su definirani s XML, što znači da se slike mogu pretraživati indeksirano, skriptirano i komprimirano.
- Sa SVG slikom možete učiniti gotovo sve što možete učiniti s bilo kojom drugom slikom, uključujući uključivanje različitih tehnika dizajna. Lako je dodavati filtre, načine miješanja, efekte opeklina, boje, izrezivanja i maskiranja, kapljice i gotovo bilo koju drugu tehniku koja vam se sviđa.
- SVG datoteke su dostupne.
- SVG radi s otvorenim web standardima.
- SVG možete stvoriti pomoću tekstualnog koda ili slike koju crtate. To omogućava određenu slobodu, ovisno o vašim potrebama i razini stručnosti u različitim područjima.
- Veličine datoteka su sitne i mogu se složiti. To znači da grafika koja je možda bila velika, nije, povećavajući vrijeme učitavanja. (Uvijek bonus.)
Slabosti korištenja SVG-a
Vjerojatno ste prodani na SVG-u nakon što pročitate sve pogodnosti, zar ne? No, treba uzeti u obzir i nekoliko negativnih razloga.
- Stariji preglednici - kao što je Internet Explorer 8 ili noviji - ne podržavaju SVG. Vjerojatno ćete pronaći posao oko sebe (ili vam možda nije stalo), ali trebali biste znati da bi moglo biti nekih korisnika koji ne vide vaše slike.
- SVG ne radi za složene slike poput fotografija. To je format dizajniran samo za oblike i linije.
Što slijedi za SVG?
Budućnost SVG tek počinje. Kao usvojeni mobilni format slike (i standardni), upotreba i razvoj SVG samo će nastaviti rasti.
Prema W3C-u, "SVG 2 je trenutno u fazi izrade i SVG-u će se dodati nove značajke jednostavne uporabe, kao i bliža integracija s HTML-om, CSS-om i DOM-om, te brisanje značajki koje ne podržavaju svi preglednici."
Ostali dodaci se također bacaju okolo. Tvrtke za izradu hardvera za ispis traže načine kako bolje koristiti SVG za procese ispisa i imaju podršku čelnika industrije kao što su Adobe i Canon. Također se proširuje i upotreba u mapiranju i GIS-u, omogućavajući bolje mapiranje i zumiranje.
Kad stvarno počnete razmišljati o tome, gotovo je beskrajna prilika za korištenje i implementaciju SVG-a u projekte širom interneta i u tiskanom dizajnu. (To je jedna od ljepota vektorskog formata.)
SVG resursi
Sada kada ste malo više uzbuđeni zbog SVG-a i možete vidjeti zašto i kako može biti koristan za vaše projekte, imamo popis resursa koji će vam pomoći da započnete.
- Izvoz SVG-a za Web s Adobe Illustrator-om
- Ugradi SVG izravno u HTML stranice
- Gore i pokretanje sa SVG Video Series
- SVG profili
- CSS trikovi: Korištenje SVG-a
Zaključak
Već koristite SVG za svoje projekte? Ako ne, jeste li spremni na promjenu?
SVG skoro svakodnevno postaje sve popularniji i zato što je alat otvorenog koda, ove promjene i pomaci pročitaju se za vas odmah. Niste vezani ni za jednog dobavljača ili proizvod i možete stvoriti slike koje su u potpunosti kompatibilne na suvremenom webu.
Stock Photos Ljubazno kreativno tržište .
