Skalabilne vektorske grafike (SVG) predstavljaju pristupačnu alternativu, sa odličnim API-om i mnogim drugim prednostima, a mogu biti animirane kreativnom upotrebom Cascading Style Sheets (CSS).
Pokazalo se da selektivna upotreba dobro dizajniranih animacija poboljšava iskustvo korisnika. Iako veb polako prelazi na HTML5 za veb animacije, njegova upotreba sa sobom nosi i određene komplikacije.
U ovom članku ćemo se pozabaviti svim drugim prednostima SVG-a i naučićemo Vas kako da ih koristite u kombinaciji sa CSS-om.
Zašto su skalabilne vektorske grafike toliko dobre
Kao što možete da pretpostavite, one mogu biti prilično korisne kada pravite prilagodljiv veb-sajt. Međutim, pošto se grafike obrađuju korišćenjem vektora, obično koriste više podataka nego što je neophodno, kada su u pitanju složene slike. Zbog ovoga se koristi uglavnom samo za logoe, infografike ili obične grafikone.
Povrh toga što su prilagodljive, skalabilne vektorske grafike imaju i neke ugrađene grafičke efekte (kao što su filteri ili režimi za pretapanje lejera), kao i izuzetno pristupačan DOM API. U stvari, ako ste već upoznati sa CSS-om i JavaScript-om (a sigurno jeste), trebalo bi da Vam upravljanje SVG fajlovima ide od ruke. Ova fleksibilnost Vam omogućava da npr. kreirate SVG fajlove na strani servera, i da ih lako izmenite, bez pribegavanja korišćenju specijalnih alata (o čemu će kasnije biti reči).
Naposletku, SVG mogu lako biti animirane upotrebom CSS-a. Ali hajde da najpre prođemo kroz proces upravljanja SVG-om korišćenjem specijalnih alata.
Kako raditi sa SVG-om
Kao što smo ranije spomenuli, možete sami rukovati SVG-om, ako vam se tako više dopada. Iako je to potpuno validna metoda, ima i sjajnih alata dostupnih za direktno kreiranje, ali Vam to onemogućava da koristite kod za bilo šta drugo osim običnog CSS stajlinga i animacija.
Najpopularnije opcije su Adobe Illustrator, Inkscape, Sketch , Affinity Designer. U slučaju Illustrator-a, proces kreiranja je toliko jednostavan da uključuje samo pripremu Vaše slike i njeno eksportovanje korišćenjem SVG opcije ‘Save as‘. Kada ovo budete radili, možda ćete primetiti opciju SVG Profiles, koja nudi nekoliko mogućnosti u padajućem meniju, poput SVG Tiny (koji je podesniji za smartfone) i SVG Basic (zastareo profil namenjen za koričšćenje na PDA), ali mi ćemo se držati SVG 1.1.
Loša strana korišćenja ovakvih alata za kreiranje je što one mogu dodati mnogo metapodataka osnovnom kodu, što rezultira fajlovima većim nego što treba da budu. Naravno, ovo predstavlja problem u veb dizajnu, jer ne želite da Vam se poveća vreme učitavanja usled loše optimizacije u vašem end-u. Skalabilne vektorske grafike stoga moraju biti optimizirane (u većini slučajeva) pre nego što ih možete pripojiti svom veb-sajtu.
Više o optimizaciji slika, i prilagodljivom dizajnu (responsive web design – RWD).
Zaključak
Ako se pravilno koriste, animacije mogu poboljšati iskustvo korisnika i celokupan dizajn sajta. Iako SVG u kombinaciji sa CSS-om predstavlja elegantan način da ih implementirate, postoji mnogo drugih metoda koje takođe možete isprobati dok ne pronađete onu koja najbolje zadovoljava vaše potrebe.
Ako ipak odaberete CSS animacije za SVG, ne zaboravite da sledite gore pomenute savete:
- Odaberite kompatibilni alat za grafičko uređivanje.
- Setite se da uvek opimizujete SVG kod.
- Imajte na umu da na ovaj način možete implementirati samo ‘jednostavne‘ animacije.
- Kako odabrati savršenu šemu boja
Koju metodu animacije Vi preferirate za svoj dizajn? Podelite ih sa nama u komentarima.