Prednosti korišćenja Scalable Vector Graphics
Scalable Vector Graphics, ili SVG, danas igraju važnu ulogu u dizajnu web stranica. Ako trenutno ne koristite SVG u svom web dizajnom radu, evo nekih razloga zašto bi to trebalo početi, kao i povratne napake koje možete koristiti za starije pregledače koji ne podržavaju ove datoteke.
Rezolucija
Najveća korist SVG-a je nezavisnost za rezoluciju. Zbog toga što su SVG datoteke vektorske grafike umjesto raster slike zasnovane na pikselima, one se mogu mijenjati veličinom bez gubitka kvaliteta slike. Ovo je naročito korisno kada kreirate odgovarajuće web stranice koje moraju izgledati dobro i dobro funkcionisati u širokom opsegu dimenzija i uređaja ekrana .
SVG datoteke se mogu skalirati gore ili dole kako bi se prilagodile promenama i postavljanju potreba vašeg odgovarajućeg web sajta i ne morate se brinuti o tim grafikama koje imaju ugroženu kvalitetu bilo koji korak na putu.
Veličina fajla
Jedan od izazova korišćenjem rasterskih slika (JPG, PNG, GIF) na odgovarajućim web stranicama je veličina datoteke tih slika. Pošto rasterske slike ne skaliraju način na koji vektorski rade, potrebno je dostaviti slike zasnovane na pikselima u najvećoj veličini na kojoj će biti prikazane. To je zato što uvek možete napraviti manju sliku i zadržati njegov kvalitet, ali isto nije tačno za pravljenje slika većim. Konačni rezultat je to što često imate slike koje su daleko veće nego što se prikazuju na ekranu osobe, što znači da su bez potrebe primorane da preuzmu veoma veliku datoteku.
SVG rešava ovaj izazov. Pošto su vektorska grafika skalabilna, možete imati vrlo male veličine datoteka bez obzira na to koliko će te slike možda biti potrebne za prikazivanje. Ovo će na kraju imati pozitivan uticaj na ukupne performanse sajta i brzinu preuzimanja.
CSS Styling
SVG kod se takođe može direktno dodati HTML-u stranice. Ovo je poznato pod nazivom "inline SVG". Jedna od prednosti korišćenja inline SVG-a je da, pošto grafiku virtuelno privlači pretraživač na osnovu vašeg koda, nema potrebe da se napravi HTTP zahtjev za preuzimanje datoteke slike. Druga prednost je što se inline SVG može stilizovati CSS-om.
Treba li promijeniti boju SVG ikone? Umesto da je trebate otvoriti tu sliku u nekom softveru za uređivanje i ponovo izvoziti i otpremiti datoteku, jednostavno možete promijeniti SVG datoteku sa nekoliko redova CSS-a.
Možete koristiti i druge stilove CSS-a na SVG grafikonima kako biste ih promijenili u stanje lebdećih ili za određene potrebe dizajna. Možete čak i da animirate te grafike kako biste dodali neki pokret i interaktivnost na stranici.
Animacije
Budući da se inline SVG datoteke mogu stilizovati CSS-om, na njima možete koristiti i CSS animacije. CSS transformacije i tranzicije su dva jednostavna načina da dodate život nekim SVG datotekama. Možete dobiti bogata Flash iskustva na stranici bez pristajanja na nedostatke koje dolaze koristeći Flash na web stranicama danas.
Upotreba SVG-a
Ono što je snažno kao SVG, ove grafike ne mogu zameniti svaki drugi format slike koji koristite na vašoj web lokaciji. Fotografije koje zahtevaju duboku dubinu boje ipak će morati biti JPG ili možda PNG datoteka, ali jednostavne slike kao što su ikone su savršeno pogodne za izvršavanje kao SVG.
SVG takođe može biti prikladan za složenije ilustracije, kao što su logotipi kompanije ili grafovi i grafikoni. Sva grafika će imati koristi od toga da bude skalabilna, sposobna da bude stilizirana CSS-om, kao i druge pogodnosti navedene u ovom članku.
Podrška starijim pregledačima
Trenutna podrška za SVG je vrlo dobra u modernim veb pregledačima. Jedini pretraživači koji stvarno nemaju podršku za ove grafike su starije verzije Internet Explorer-a (verzija 8 i niže) i nekoliko starijih verzija Android-a. Sve u svemu, veoma mali procenat populacije pretraživača i dalje koristi ove pregledače i taj broj se nastavlja smanjivati. To znači da SVG može biti sigurno korišten na web stranicama danas.
Ako želite da obezbedite rezervni povratak za SVG, možete koristiti alat kao što je Grumpicon iz grupe Filament. Ovaj resurs će uzeti vaše SVG slike i kreirati PNG povratne padove za starije pregledače.
Uredio Jeremy Girard na 1/27/17