Prednosti uporabe razširljive vektne grafike
Razširljiva vektorska grafika ali SVG igrajo danes pomembno vlogo pri oblikovanju spletnih strani. Če trenutno ne uporabljate SVG pri vašem delu spletnega oblikovanja, tukaj je nekaj razlogov, zakaj bi to morali začeti, pa tudi povratne napake, ki jih lahko uporabite za starejše brskalnike, ki teh datotek ne podpirajo.
Resolucija
Najvišja prednost SVG je resolucija neodvisnosti. Ker so SVG datoteke vektorska grafika namesto rastrskih slik na osnovi pikslov, jih je mogoče spremeniti, ne da bi pri tem izgubili kakovost slike. To je še posebej koristno, ko ustvarjate odzivne spletne strani, ki morajo dobro izgledati in delati dobro v različnih velikostih in napravah zaslona .
SVG datoteke je mogoče povečati ali pomanjšati, da prilagodite spreminjajočim se velikostim in postavitvam potrebam vašega odzivnega spletnega mesta, zato vam ni treba skrbeti za tiste grafike, ki so ogrozili kvaliteto vsakega koraka poti.
Velikost datoteke
Eden od izzivov z uporabo rastrskih slik (JPG, PNG, GIF) na odzivnih spletnih mestih je velikost datotek teh slik. Ker rastrske slike ne obsegajo načina, kako te vektorske naredijo, morate podati svoje slikovne slike na največji velikosti, na kateri bodo prikazane. To je zato, ker lahko vedno naredite sliko manjšo in ohranite njegovo kakovost, vendar enako ni res, da bi se slike povečale. Končni rezultat je, da imate pogosto slike, ki so veliko večje od tistih, ki so prikazani na zaslonu osebe, kar pomeni, da so nepotrebno prisiljeni prenesti zelo veliko datoteko.
SVG obravnava ta izziv. Ker so vektorske grafike razširljive, lahko imate zelo majhne velikosti datotek, ne glede na to, kako morda bodo prikazane te slike. To bo na koncu imelo pozitiven učinek na splošno uspešnost spletnega mesta in hitrost prenosa.
CSS Styling
Koda SVG lahko dodate tudi neposredno v HTML strani. To je znano kot "inline SVG." Ena od prednosti uporabe inline SVG je, da ker grafike dejansko nariše brskalnik na podlagi vaše kode, ni potrebe po zahtevi HTTP za pridobitev slikovne datoteke. Druga prednost je, da se lahko v strežniku SVG oblikuje CSS.
Ali je treba spremeniti barvo ikone SVG? Namesto da bi to sliko odprli v nekakšni programski opremi za urejanje in znova izvozili in naložili datoteko, lahko datoteko SVG enostavno spremenite z nekaj vrsticami CSS-ja.
V SVG grafike lahko uporabite tudi druge CSS-sloge, da jih spremenite v stanju lebdenja ali pri določenih potrebah po načrtovanju. Te grafike lahko tudi animirate, da dodate nekaj gibanja in interaktivnosti na stran.
Animacije
Ker so lahko datoteke inline SVG stilizirane s CSS, lahko na njih tudi uporabite CSS animacije. Preobleki CSS in prehodi sta dva preprosta načina za dodajanje življenja SVG datotekam. Na straneh lahko najdete bogate izkušnje, podobne Flashu, ne da bi podlegli slabosti, ki jih danes uporabljate Flash na spletnih mestih.
Uporaba SVG
Tako močna kot SVG, te grafike ne morejo nadomestiti vseh drugih oblik slike, ki jih uporabljate na vašem spletnem mestu. Fotografije, ki zahtevajo globoko barvno globino, bodo še vedno morale biti JPG ali morda datoteke PNG, preproste slike, kot so ikone, so popolnoma primerne za izvajanje kot SVG.
SVG je lahko primeren tudi za bolj zapletene ilustracije, kot so logotipi podjetja ali grafi in grafikoni. Vse grafike bodo imele koristi od tega, da bi jih bilo mogoče razširiti, jih je mogoče stilizirati s CSS in drugimi prednostmi, navedenimi v tem članku.
Podpora za starejše brskalnike
Trenutna podpora za SVG je zelo dobra v sodobnih spletnih brskalnikih. Edini brskalniki, ki resnično nimajo podpore za te grafike, so starejše različice Internet Explorerja (različica 8 in novejše različice) in nekaj starejših različic Androida. Vsekakor zelo majhen odstotek populacije brskanja še vedno uporablja te brskalnike in ta številka se še naprej skrči. To pomeni, da se lahko SVG danes varno uporablja na spletnih straneh.
Če želite zagotoviti SVG nadomestno napravo, lahko uporabite orodje, kot je Grumpicon iz skupine Filament. Ta vir bo vzel vaše slikovne datoteke SVG in ustvaril povratne napake PNG za starejše brskalnike.
Uredil Jeremy Girard dne 1/27/17