Prednosti korištenja Scalable Vector Graphics
Skalabilna Vector Graphics, ili SVG, igraju važnu ulogu u dizajnu web stranica danas. Ako trenutačno ne upotrebljavate SVG u svom radu za web dizajn, evo nekoliko razloga zašto biste to trebali početi, kao i zamjenske znakove koje možete koristiti za starije preglednike koji ne podržavaju ove datoteke.
rezolucija
Najveća korist od SVG je neovisnost rezolucije. Budući da su SVG datoteke vektorska grafika umjesto piksela na temelju piksela, mogu se mijenjati bez gubitka kvalitete slike. To je posebno korisno prilikom izrade responzivnih web stranica koje trebaju izgledati dobro i dobro rade na širokom rasponu veličina zaslona i uređaja .
SVG datoteke mogu se povećavati ili smanjivati kako bi se prilagodile promjenjivoj veličini i izgledu vaše responzivne web stranice i ne trebate se brinuti o onim grafičkim sadržajima koji imaju ugroženu kvalitetu bilo kakav korak.
Veličina datoteke
Jedan od izazova s upotrebom raster slika (JPG, PNG, GIF) na responzivnim web stranicama je veličina datoteke tih slika. Budući da slikovne slike ne opterećuju način na koji vektorski rade, trebate isporučiti slike temeljene na pikselima najveće veličine na kojoj će se prikazivati. To je zato što uvijek možete smanjiti sliku i zadržati njegovu kvalitetu, ali isto ne vrijedi za izradu slika veće. Krajnji rezultat je da često imate slike koje su daleko veće od prikazivanja na zaslonu osobe, što znači da su nepotrebno prisiljeni preuzeti vrlo veliku datoteku.
SVG rješava taj izazov. Budući da je vektorska grafika skalabilna, možete imati vrlo male veličine datoteka bez obzira na veličinu prikazanih slika. To će u konačnici imati pozitivan učinak na ukupnu izvedbu web mjesta i brzinu preuzimanja.
CSS Styling
SVG kod također se može dodati izravno u HTML stranice. To je poznato kao "inline SVG". Jedna od prednosti korištenja inline SVG je da, s obzirom na to da grafika zapravo crpi preglednik na temelju vašeg koda, nema potrebe za HTTP zahtjevom za dohvaćanje slikovne datoteke. Još jedna prednost je što inline SVG može biti styliran s CSS-om.
Trebate promijeniti boju ikone SVG? Umjesto da trebate otvoriti tu sliku u nekom softveru za uređivanje i izvesti i ponovno prenijeti datoteku, možete jednostavno promijeniti SVG datoteku s nekoliko redaka CSS-a.
Također možete koristiti druge CSS stilove na SVG grafiku kako biste ih promijenili u stanju mirovanja ili za određene dizajnne potrebe. Možete čak i animirati te grafike kako biste dodali neki kretnji i interaktivnost na stranicu.
Animacije
Budući da se inline SVG datoteke mogu oblikovati pomoću CSS-a, možete ih koristiti i na CSS animacijama. CSS pretvara i prijelazi su dva jednostavna načina za dodavanje nekog života u SVG datoteke. Možete dobiti bogata iskustva slična Flashu na stranici bez podnošenja na padove koji dolaze s upotrebom Flasha na web stranicama.
Upotrebe SVG-a
Kao snažan kao SVG, te grafike ne mogu zamijeniti svaki drugi format slike koji koristite na svojoj web stranici. Fotografije koje zahtijevaju dubinu boja i dalje trebaju biti JPG ili možda PNG datoteka, ali jednostavne slike poput ikona savršeno su prikladne za izvršavanje kao SVG.
SVG također može biti prikladan za složenije ilustracije, poput logotipa tvrtke ili grafova i grafikona. Sve grafike će imati koristi od skalabilnosti, sposobnosti za stilizaciju s CSS i ostalim prednostima navedenim u ovom članku.
Podrška za starije preglednike
Trenutna podrška za SVG je vrlo dobra u modernim web preglednicima. Jedini preglednici koji stvarno nemaju podršku za ove grafike su starije verzije Internet Explorera (Verzija 8 i niže) i nekoliko starijih verzija Androida. Sve u svemu, vrlo mali postotak populacije pregledavanja i dalje koristi ove preglednike, a taj se broj i dalje smanjuje. To znači da SVG može biti prilično siguran na web stranicama danas.
Ako želite podnijeti zamjenu za SVG, možete upotrijebiti alat kao što je Grumpicon iz grupe Filament. Ovaj resurs će voditi vaše SVG slikovne datoteke i stvoriti PNG zamke za starije preglednike.
Uredio Jeremy Girard na 1/27/17