Skalabilna vektorska grafika, ili SVG, igra važnu ulogu u dizajnu web stranica danas. Ako trenutno ne koristite SVG u svom web dizajnu, evo nekoliko razloga zašto biste to trebali raditi, kao i rezervnih opcija koje možete koristiti za starije pretraživače koji ne podržavaju ove datoteke.
Rezolucija
Najveća prednost SVG-a je nezavisnost rezolucije. Budući da su SVG datoteke vektorska grafika (za razliku od rasterskih slika zasnovanih na pikselima), možete im promijeniti veličinu bez gubitka kvalitete slike. Ovo je posebno korisno kada kreirate responzivne web stranice koje moraju izgledati dobro i dobro raditi na širokom rasponu veličina ekrana i uređaja. Možete skalirati SVG fajlove nagore ili nadole kako biste se prilagodili promjenjivim potrebama veličine i izgleda vaše web stranice, a da na bilo koji način ne ugrozite njihov kvalitet.
Generalno, SVG-ovi imaju glatkiji, oštriji izgled od slika drugih formata, bez obzira na veličinu.
Veličina fajla
Jedan izazov sa upotrebom rasterskih slika (npr. JPG, PNG, GIF) na responzivnim web stranicama je veličina datoteke. Budući da rasterske slike ne skaliraju na način na koji to rade vektorske slike, morate isporučiti svoje slike zasnovane na pikselima u najvećoj veličini u kojoj će biti prikazane. To je zato što uvijek možete smanjiti sliku i zadržati njen kvalitet, ali isto ne vrijedi za povećanje slika. Rezultat su slike koje su daleko veće od veličine u kojoj se gledaju, što primorava pretraživače da preuzimaju velike fajlove.
Nasuprot tome, vektorska grafika je skalabilna, tako da možete koristiti vrlo male veličine datoteka bez obzira na to koliko velike te slike mogu biti potrebne. Ovo na kraju optimizira ukupne performanse web lokacije i brzinu preuzimanja.
CSS stil
Možete lako dodati SVG direktno u HTML stranice. Ovo je poznato kao inline SVG. Jedna od prednosti korišćenja inline SVG-a je da, pošto grafiku zapravo crta pretraživač, nema potrebe za HTTP zahtevom za preuzimanje datoteke slike.
Još jedna prednost: Umetnuti SVG možete stilizirati pomoću CSS-a. Trebate promijeniti boju SVG ikone? Umjesto da uređujete tu sliku u softveru za uređivanje grafike, a zatim ponovo izvozite i otpremite datoteku, možete promijeniti SVG datoteku jednostavno s nekoliko linija CSS-a. Možete koristiti CSS da promijenite SVG-ove za stanja lebdenja i druge potrebe dizajna.
Donja linija
Budući da možete stilizirati umetnute SVG datoteke pomoću CSS-a, možete koristiti i CSS animacije na njima. CSS transformacije i tranzicije su dva laka načina da dodate malo života SVG-ovima. Možete dobiti bogata iskustva poput Flasha na stranici bez korištenja Flash-a – koji iPad više ne podržava. Zapravo, Adobe postepeno ukida Flash do kraja 2020.
Upotreba SVG
Koliko god moćni bili SVG-ovi, ne mogu zamijeniti svaki drugi format slike. Fotografije koje zahtijevaju bogatu dubinu boje i dalje bi trebale biti u-j.webp
SVG je takođe prikladan za neke složene ilustracije, kao što su grafikoni, grafikoni i logotipi kompanije. Sve ove grafike imaju koristi od toga što su skalabilne i mogu se stilizirati pomoću CSS-a.
Podrška za starije pretraživače
Trenutna podrška za SVG je veoma dobra u modernim web pretraživačima. Jedini pretraživači koji nemaju podršku za ovu grafiku su stare verzije Internet Explorera (koje Microsoft više ne podržava) i nekoliko starih verzija Androida. Sve u svemu, vrlo mali postotak populacije koja pregledava i dalje koristi ove pretraživače, a taj broj nastavlja da se smanjuje. To znači da možete koristiti SVG na svojoj web stranici bez brige.
Ako želite da obezbedite rezervnu verziju za SVG, koristite alat kao što je Grumpicon iz Filament grupe. Ovaj resurs kreira PNG-ove iz vaših SVG slikovnih datoteka.
