Scalable Vector Graphics, alebo SVG, dnes hrá dôležitú úlohu v dizajne webových stránok. Ak momentálne nepoužívate SVG vo svojej práci na tvorbe webu, tu je niekoľko dôvodov, prečo by ste s tým mali začať, ako aj záložné riešenia, ktoré môžete použiť pre staršie prehliadače, ktoré tieto súbory nepodporujú.
Rozlíšenie
Najväčšou výhodou SVG je nezávislosť na rozlíšení. Keďže súbory SVG sú vektorovou grafikou (na rozdiel od rastrových obrázkov založených na pixeloch), môžete zmeniť ich veľkosť bez straty kvality obrázka. Je to užitočné najmä pri vytváraní responzívnych webových stránok, ktoré musia dobre vyzerať a fungovať na širokej škále veľkostí obrazoviek a zariadení. Súbory SVG môžete zväčšiť alebo zmenšiť tak, aby vyhovovali meniacim sa potrebám veľkosti a rozloženia vášho responzívneho webu bez toho, aby ste akýmkoľvek spôsobom ohrozili ich kvalitu.
Vo všeobecnosti majú SVG bez ohľadu na veľkosť hladší a ostrejší vzhľad ako obrázky iných formátov.
Veľkosť súboru
Jednou výzvou pri používaní rastrových obrázkov (napr. JPG, PNG, GIF) na responzívnych webových stránkach je veľkosť súboru. Pretože rastrové obrázky nemajú rovnakú mierku ako vektorové obrázky, musíte obrázky založené na pixeloch dodať v najväčšej veľkosti, v akej sa zobrazia. Je to preto, že obrázok môžete vždy zmenšiť a zachovať jeho kvalitu, ale to isté neplatí pre zväčšovanie obrázkov. Výsledkom sú obrázky, ktoré sú oveľa väčšie ako veľkosť, v ktorej sa zobrazujú, čo núti prehliadače sťahovať veľké súbory.
Naproti tomu vektorová grafika je škálovateľná, takže môžete použiť veľmi malé veľkosti súborov bez ohľadu na to, aké veľké obrázky možno bude potrebné zobraziť. To v konečnom dôsledku optimalizuje celkový výkon stránky a rýchlosť sťahovania.
Štýl CSS
SVG môžete jednoducho pridať priamo do HTML stránky. Toto je známe ako inline SVG. Jednou z výhod používania inline SVG je, že keďže grafiku v skutočnosti kreslí prehliadač, nie je potrebná požiadavka HTTP na načítanie súboru obrázka.
Ďalšia výhoda: Môžete štylizovať inline SVG pomocou CSS. Potrebujete zmeniť farbu ikony SVG? Namiesto úpravy tohto obrázka v softvéri na úpravu grafiky a následného exportovania a opätovného nahrávania súboru môžete zmeniť súbor SVG jednoducho pomocou niekoľkých riadkov CSS. CSS môžete použiť aj na zmenu SVG pre stavy vznášania a ďalšie potreby dizajnu.
Zrátané podčiarknutie
Pretože môžete vložené súbory SVG štylizovať pomocou CSS, môžete na ne použiť aj animácie CSS. Transformácie a prechody CSS sú dva jednoduché spôsoby, ako pridať do SVG trochu života. Bohaté zážitky podobné Flash môžete na stránke získať aj bez použitia Flash – ktorý iPad už nepodporuje. V skutočnosti spoločnosť Adobe postupne vyraďuje Flash do konca roka 2020.
Použitie SVG
Nakoľko sú SVG výkonné, nedokážu nahradiť každý iný obrazový formát. Fotografie, ktoré stále vyžadujú bohatú farebnú hĺbku, by mali byť vo formáte-j.webp
SVG je vhodné aj pre niektoré zložité ilustrácie, ako sú grafy, tabuľky a logá spoločností. Všetky tieto grafiky ťažia z toho, že sú škálovateľné a dajú sa upraviť pomocou CSS.
Podpora pre staršie prehliadače
Súčasná podpora pre SVG je v moderných webových prehliadačoch veľmi dobrá. Jedinými prehliadačmi, ktoré nemajú podporu pre túto grafiku, sú staré verzie Internet Explorera (ktorý už Microsoft nepodporuje) a niekoľko starých verzií Androidu. Celkovo vzaté, veľmi malé percento populácie prehliadania stále používa tieto prehliadače a toto číslo sa stále znižuje. To znamená, že môžete bez obáv používať SVG na svojom webe.
Ak chcete poskytnúť záložné riešenie pre SVG, použite nástroj ako Grumpicon od skupiny Filament. Tento zdroj vytvára súbory-p.webp
