Skalabilna vektorska grafika ili SVG igra važnu ulogu u današnjem dizajnu web stranica. Ako trenutno ne koristite SVG u svom radu na web dizajnu, evo nekoliko razloga zašto biste to trebali početi činiti, kao i zamjene koje možete koristiti za starije preglednike koji ne podržavaju ove datoteke.
Rezolucija
Najveća prednost SVG-a je neovisnost o rezoluciji. Budući da su SVG datoteke vektorska grafika (za razliku od rasterskih slika temeljenih na pikselima), možete im promijeniti veličinu bez gubitka kvalitete slike. Ovo je osobito korisno kada stvarate responzivna web-mjesta koja moraju izgledati dobro i dobro funkcionirati na širokom rasponu veličina zaslona i uređaja. Možete skalirati SVG datoteke prema gore ili dolje kako biste se prilagodili promjenjivoj veličini i potrebama vašeg responzivnog web-mjesta bez ugrožavanja njihove kvalitete na bilo koji način.
Općenito, SVG imaju glatkiji, oštriji izgled od slika drugih formata, bez obzira na veličinu.
Veličina datoteke
Jedan izazov s upotrebom rasterskih slika (npr. JPG, PNG, GIF) na responzivnim web-lokacijama je veličina datoteke. Budući da se rasterske slike ne skaliraju na način na koji to čine vektorske slike, svoje slike temeljene na pikselima morate isporučiti u najvećoj veličini u kojoj će biti prikazane. To je zato što uvijek možete smanjiti sliku i zadržati njezinu kvalitetu, ali isto ne vrijedi za povećanje slika. Rezultat su slike koje su daleko veće od veličine u kojoj se gledaju, što tjera preglednike na preuzimanje velikih datoteka.
Suprotno tome, vektorska grafika je skalabilna, tako da možete koristiti vrlo male veličine datoteka bez obzira na to koliko velike te slike trebaju biti prikazane. Ovo u konačnici optimizira ukupnu izvedbu web-mjesta i brzinu preuzimanja.
CSS stiliziranje
Lako možete dodati SVG izravno u HTML stranice. To je poznato kao ugrađeni SVG. Jedna od prednosti korištenja ugrađenog SVG-a je da, budući da grafiku zapravo iscrtava preglednik, nema potrebe za HTTP zahtjevom za dohvaćanje slikovne datoteke.
Još jedna prednost: možete stilizirati ugrađeni SVG pomoću CSS-a. Trebate promijeniti boju SVG ikone? Umjesto uređivanja te slike u softveru za uređivanje grafike i zatim ponovnog izvoza i učitavanja datoteke, možete jednostavno promijeniti SVG datoteku s nekoliko redaka CSS-a. Možete koristiti CSS za promjenu SVG-ova za stanja lebdenja i druge potrebe dizajna.
Donja crta
Budući da možete stilizirati ugrađene SVG datoteke s CSS-om, na njima također možete koristiti CSS animacije. CSS transformacije i prijelazi dva su jednostavna načina za dodavanje malo života SVG-ovima. Na stranici možete dobiti bogata iskustva poput Flasha bez korištenja Flasha koji iPad više ne podržava. Zapravo, Adobe postupno ukida Flash do kraja 2020.
Upotrebe SVG
Koliko god moćni bili SVG-ovi, ne mogu zamijeniti svaki drugi format slike. Fotografije koje zahtijevaju bogatu dubinu boja ipak bi trebale biti u-j.webp
SVG je također prikladan za neke složene ilustracije, poput grafikona, grafikona i logotipa tvrtke. Sve ove grafike imaju koristi od toga što su skalabilne i mogu se stilizirati pomoću CSS-a.
Podrška za starije preglednike
Trenutna podrška za SVG je vrlo dobra u modernim web preglednicima. Jedini preglednici koji nemaju podršku za ovu grafiku su stare verzije Internet Explorera (koju Microsoft više ne podržava) i nekoliko starih verzija Androida. Sve u svemu, vrlo mali postotak populacije koja pregledava još uvijek koristi ove preglednike, a taj se broj i dalje smanjuje. To znači da možete bez brige koristiti SVG na svojoj web stranici.
Ako ipak želite osigurati zamjenu za SVG, koristite alat kao što je Grumpicon iz Filament Group. Ovaj resurs stvara-p.webp
