Zašto koristimo SVG?
Sektor web razvoja raste brzim tempom, a SVG (skalabilne vektorske grafike) postaju sve popularnije. Kao vektorske slike, SVG-ovi se sastoje od matematičkih jednadžbi koje definiraju položaj i boju linija i krivulja koje čine grafičke oblike i tekst u XML formatu. SVG se koriste za ikone, logotipe, grafičke dizajne i fontove.
Korištenje SVG-ova jednostavan je izbor nakon što uzmete u obzir prednosti koje nude. Za klijenta dobivate vrhunsku kvalitetu na bilo kojem uređaju. Za nas kao programere postoji još više razloga za upotrebu SVG-a.
Razgovarajmo sada o nekim prednostima SVG-a.
1. Tekstualni format
SVG elementi sadrže tekst, što uvelike poboljšava dostupnost web stranice. Ali glavna prednost je što su ovaj tekst indeksirale tražilice. A korisnik može pronaći SVG datoteku putem Googlea.
2. Skalabilnost
Kvaliteta SVG slika ne ovisi o razlučivosti. Za razliku od slika drugih formata ili fontova ikona, SVG-ovi izgledaju savršeno oštro na bilo kojem uređaju bilo koje veličine zaslona. Skalabilnost također znači da ako koristite istu sliku na cijelom web mjestu, ali u različitim veličinama, koristite jedan SVG. Ne morate stvoriti više kopija istog kao u slučaju PNG-a. Umjesto toga, ugrađujete istu sliku i izravno je definirate u SVG kodu.
3. Visoke performanse
Ako prioritet dajete izvedbi, trebali biste koristiti SVG. Uz SVG, nije potreban HTTP zahtjev za učitavanje u slikovnu datoteku. Stranica se brže učitava jer nema datoteka za preuzimanje. Brže vrijeme učitavanja dovodi do boljih performansi web stranica i većeg rangiranja na tražilicama. Zauzvrat, poboljšava korisničko iskustvo.
4. Mala veličina datoteke
Veličina jednostavnih SVG datoteka definira se bojama, slojevima, gradijentima, efektima i maskama koje sadrže. Veličina PNG ili bilo koje druge rasterske grafičke datoteke definira se brojem piksela od kojeg se sastoji. Što je PNG veća slika, to je veća. To, međutim, nije slučaj sa SVG ikonama. Također, SVG-ovi se mogu optimizirati, a to ću reći kasnije u ovom članku.
5. Brojne mogućnosti uređivanja i animiranja
Za razliku od rasterskih slika, vektorske se slike mogu uređivati i u posebnim programima za vektorsko crtanje i izravno u uređivaču teksta. Također možete uređivati boje ili veličine SVG ikona izravno putem CSS-a. Što se tiče animiranja SVG-ova, to se može učiniti uz pomoć SMIL-a, API-ja za web animacije, WebGL-a ili CSS-animacije. Pomaknite se prema dolje da biste saznali više o CSS animaciji SVG slika.
6. Integracija s HTML-om, XHTML-om i CSS-om
SVG je dizajniran "za integraciju i proširenje drugih istaknutih tehnologija otvorene web platforme, kao što su X / HTML, CSS i Javascript", prema W3C. Dakle, za razliku od različitih formata slika, ovaj se format može lako integrirati s drugim dokumentima i tehnologijama.
7. Podrška za objektni model dokumenta W3C
Sve je veća podrška zajednice za SVG. Konzorcij za World Wide Web (W3C) uvijek je tvrdio da Internet ne može bez vektorskih slika. Ova je organizacija u osnovi stvorila SVG format i oni je danas aktivno podržavaju.
Koje su neugodnosti SVG-a?
Veliki broj malih dijelova upotrebu SVG formata čini iracionalnom. Što se slika sastoji od više dijelova, to teža raste.
Na primjer, evo dvije SVG karte Sjedinjenih Država. Drugi je nešto detaljniji od prvog. No viša razina detalja koštala je gotovo peterostruko povećanje veličine datoteke - 33 KB u usporedbi sa 147 KB. Da ova karta nije jednobojna, povećanje bi bilo puno veće.
Ako je slika linearna i sadrži nekoliko boja - SVG je rješenje. Međutim, ako su detalji važni i ako ih ima puno, PNG ili JPEG mogu biti prikladniji.
Također imajte na umu da se SVG ne može koristiti za fotografije. Ako na svojoj web stranici koristite fotografiju, SVG nije najbolja opcija. Svakako biste trebali koristiti format rasterske slike.
Kako optimizirati SVG slike
Kada generiramo vektorski format, moramo napisati dodatni SVG kôd. Krajnji rezultat treba optimizirati pomoću različitih usluga. Najčešće za optimizaciju SVG-a koristim Node.js alat SVGO. Prilično je jednostavan za upotrebu i nema potrebe za prijenosom slika na druge web stranice.
Kako animirati SVG
SVG grafika na webu može se animirati na više načina:
- SMIL, što je izvorna specifikacija SVG animacije
- API za web animacije, koji je izvorni JavaScript API koji vam omogućuje stvaranje složenijih sekvencijalnih animacija bez učitavanja vanjskih skripti
- WebGL
- CSS animacija
Razmotrimo posljednju.
CSS animacija koristi se kako bi se izbjeglo preopterećenje vaše usluge velikim knjižnicama za animiranje ikona i učitavača.
Da biste vidjeli primjer SVG-a, provjerite animirani žumanjak čiji je grafički dizajn u početku nacrtan u Skici.
Kao što ovdje možete vidjeti, za animaciju koristim sintaksu ključnog okvira animacije. Provodi se postavljanjem početnog položaja elementa pomoću id (0%), prijelaza (50%) i konačnog položaja (100%). Da bi se postigla glatka animacija, početna i konačna vrijednost jednake su.
Evo nekoliko prednosti korištenja CSS pristupa SVG animaciji:
- Ne trebate vanjsku knjižnicu.
- Preprocesori (poput Sass ili Less) omogućuju vam stvaranje varijabli.
- Možete koristiti onAnimationEnd i neke druge kuke za animaciju s izvornim JavaScriptom.
- Ovaj je pristup jednostavan za upotrebu za razvoj responzivnog web dizajna jer svoju animaciju možete mijenjati pomoću medijskih upita.
Na nedostatke korištenja CSS animacije su sljedeći:
- Ne možete stvoriti neke složene fizičke efekte, što bi animaciju učinilo realističnijom.
- Treba prilagoditi puno vremena ako prilagodite vrijeme.
- CSS i SVG grafika na mobilnim uređajima ponekad zahtijeva neobične hakove.
Na primjer
Ipak, možemo napraviti neke zanimljive projekte uz pomoć jednostavne i trivijalne CSS animacije. Na primjer, napravio sam jednostavan video-igra koristeći HTML, CSS i malo JavaScript-a. Svi SVG-ovi izvučeni su u Skici. Cilj ove igre je spasiti princezu. U bilo kojoj situaciji samo kliknite. Projekt možete pronaći na mom GitHubu.
Zamotati
SVG-ovi su izvrstan format slike. Prilagodljivi su, lagani, tekstualni i učinkoviti. Lako ih je urediti, animirati i integrirati. Važno je da ih podržava gotovo bilo koji preglednik, osim Internet Explorer 8 i Android 2.3.
Iako vam učenje rada sa skalabilnim vektorskim grafičkim slikama može potrajati, to je ulaganje koje će se isplatiti s obzirom na prednosti SVG-a.
Imate li ideju za softverski projekt?
Moja tvrtka KeenEthics tim je iskusnih programera web aplikacija. U slučaju da trebate besplatnu procjenu sličnog projekta, slobodno nas kontaktirajte .
Još sličnih članaka možete pročitati na mom Keen blogu. Dopustite mi da vam predložim da pročitate Vrijednost korisničkog testiranja ili 7 slučajeva kada ne biste trebali koristiti Docker.
P.S
Također, želio bih reći "hvala" Maryni Yanul za suautorstvo u ovom članku, kao i čitateljima što su ga napravili do kraja!
Izvorni članak objavljen na blogu KeenEthics možete pronaći ovdje: Nova perspektiva zašto, kada i kako koristiti SVG.