Razširljiva vektorska grafika ali SVG ima danes pomembno vlogo pri oblikovanju spletnih mest. Če trenutno ne uporabljate SVG pri svojem spletnem oblikovanju, je tukaj nekaj razlogov, zakaj bi morali to početi, kot tudi nadomestne različice, ki jih lahko uporabite za starejše brskalnike, ki ne podpirajo teh datotek.
Ločljivost
Največja prednost SVG je neodvisnost ločljivosti. Ker so datoteke SVG vektorske grafike (v nasprotju z rastrskimi slikami na podlagi slikovnih pik), jim lahko spremenite velikost, ne da bi pri tem izgubili kakovost slike. To je še posebej koristno, ko ustvarjate odzivna spletna mesta, ki morajo izgledati dobro in dobro delovati v širokem razponu velikosti zaslona in naprav. Datoteke SVG lahko povečate ali zmanjšate, da se prilagodite spreminjajočim se potrebam po velikosti in postavitvi vašega odzivnega spletnega mesta, ne da bi pri tem kakor koli ogrozili njihovo kakovost.
Na splošno imajo SVG bolj gladek in oster videz kot slike drugih formatov, ne glede na velikost.
Velikost datoteke
Eden od izzivov pri uporabi rastrskih slik (npr. JPG, PNG, GIF) na odzivnih spletnih mestih je velikost datoteke. Ker se rastrske slike ne spreminjajo tako kot vektorske slike, morate slike, ki temeljijo na slikovnih pikah, dostaviti v največji velikosti, v kateri bodo prikazane. To je zato, ker lahko sliko vedno pomanjšate in obdržite njeno kakovost, vendar to ne velja za povečanje slik. Rezultat so slike, ki so veliko večje od velikosti, v kateri si jih ogledujete, zaradi česar morajo brskalniki prenašati velike datoteke.
Nasprotno pa je vektorska grafika prilagodljiva, tako da lahko uporabite zelo majhne velikosti datotek, ne glede na to, kako velike je treba te slike prikazati. To na koncu optimizira splošno delovanje spletnega mesta in hitrost prenosa.
Slog CSS
SVG lahko preprosto dodate neposredno v HTML strani. To je znano kot vgrajeni SVG. Ena od prednosti uporabe vgrajenega SVG je ta, da ker grafiko dejansko nariše brskalnik, ni potrebe po zahtevi HTTP za pridobitev slikovne datoteke.
Še ena prednost: vgrajeni SVG lahko oblikujete s CSS. Ali morate spremeniti barvo ikone SVG? Namesto urejanja te slike v programski opremi za urejanje grafike ter nato izvoza in ponovnega nalaganja datoteke, lahko datoteko SVG preprosto spremenite z nekaj vrsticami CSS. CSS lahko uporabite tudi za spreminjanje SVG za stanja lebdenja in druge potrebe oblikovanja.
Spodnja vrstica
Ker lahko vstavljene datoteke SVG oblikujete s CSS, lahko na njih uporabite tudi animacije CSS. Transformacije in prehodi CSS so dva enostavna načina, da dodate nekaj življenja SVG. Na strani lahko dobite bogate izkušnje, podobne Flashu, brez uporabe Flasha, ki ga iPad ne podpira več. Pravzaprav bo Adobe do konca leta 2020 postopoma opustil Flash.
Uporabe SVG
Ne glede na to, kako močni so SVG, ne morejo nadomestiti vseh drugih slikovnih formatov. Fotografije, ki zahtevajo bogato barvno globino, bi še vedno morale biti v formatu-j.webp
SVG je primeren tudi za nekatere kompleksne ilustracije, kot so grafi, diagrami in logotipi podjetij. Vse te grafike imajo koristi od tega, da so prilagodljive in da jih je mogoče oblikovati s CSS.
Podpora za starejše brskalnike
Trenutna podpora za SVG je v sodobnih spletnih brskalnikih zelo dobra. Edini brskalniki, ki nimajo podpore za te grafike, so stare različice Internet Explorerja (ki ga Microsoft ne podpira več) in nekaj starih različic Androida. Na splošno zelo majhen odstotek brskalne populacije še vedno uporablja te brskalnike in to število se še naprej zmanjšuje. To pomeni, da lahko brez skrbi uporabljate SVG na svojem spletnem mestu.
Če želite zagotoviti nadomestno različico za SVG, uporabite orodje, kot je Grumpicon iz skupine Filament. Ta vir ustvari-p.webp
