I běžný uživatel internetu se zřejmě již setkal se zkratkou SVG. Co to vlastně je a k čemu je to dobré? A proč ho poslední dobou využívá stále více webových vývojářů?
Přestože SVG zažívá svůj největší vzestup až v poslední době, tento formát se objevil již v roce 2001. Dlouho zápasil s podporou prohlížečů. Microsoft se totiž snažil protlačit svůj vlastní podobný formát VML a nejpoužívanější internetový prohlížeč Internet Explorer ho až do verze 8 vůbec nepodporoval. Nyní však SVG více než 95% prohlížečů podporuje a není tedy důvod ho nevyužít i na vašem webu.
Kde ho můžeme použít?
Rozhodně to není formát pro fotografie, pro ně jsou daleko lépe optimalizované formáty JPEG a PNG. SVG je ideální pro plošné barvy nebo přechody a geometrické obrazce. Je tedy vhodné na ikony a piktogramy (včetně textu), ale i na složitější grafická schémata a grafy. Podporuje průhlednost a díky tomu, že se dá zapsat jako XML kód má také mnohem menší velikost, než (stále ještě často) používané PNG ikony.
Co to je?
SVG nebo-li “Scalable Vector Graphic” je grafický formát pro ukládání obrázků. Jak už název napovídá je to vektorový formát, tudíž všechny jeho prvky jsou zapsané jako jednotlivé geometrické elementy. Ty mohou být definované křivkou složenou ze stovek bodů nebo základními geometrickými tvary. U každého prvku je pak dále nastavitelná výplň, okraj a průhlednost.
Není to však obyčejný obrázek, který je vygenerovaný jako nesrozumitelná změť čísel a dat. SVG je zapsaný v přehledném XML kódu, což je velká výhoda při použití na webových stránkách. Navíc jednotlivé části obrázku jsou zapsané samostatně, takže je možné s nimi manipulovat.
V čem je SVG lepší než ostatní formáty?
Jelikož je SVG vektorový formát, nedochází u něj při zvětšování velikosti ke zmenšování kvality a “rozpixelování” (jak to bývá u ostatních formátů jako je JPEG nebo PNG). Díky tomu také odpadají problémy na responzivních webech, kde se často musí nahrávat obrázek v několika velikostech, aby zůstal ostrý i na velkých monitorech a zároveň svou velikostí nebrzdil načítání stránek na mobilních zařízeních. Ten stejný SVG obrázek bude stejně ostrý na retinovém displeji, jako na starém notebooku.
To, že se dá SVG zapsat pomocí XML kódu, s sebou nese hned několik výhod. V první řadě je zahrnut přímo do kódu stránky a to velmi zrychluje načítání webu. Zkušený programátor je schopný si jednoduché grafické elementy napsat sám a nepotřebuje k tomu výstup od grafika. Další výhodou je, že text v SVG není nijak vykreslený a zachovává si svoji smysluplnost. Díky tomu je indexovatelný, takže také prohlížečům pomáhá najít vaši stránku.
Obrázky zapsané v SVG také mohou být interaktivní. Takže se výborně hodí například na grafy nebo různá schémata. Například je možné klikat na jednotlivé části obrázku nebo měnit jeho barvu přítomností kurzoru myši.
Největším tahákem SVG je však to, že je animovatelný. Každá část obrázku je zapsaná jako samostatný prvek v XML kódu, který dokážeme ovládat pomocí CSS. Tím se otvírají úplně nové dveře webovým animacím. Mohou být mnohem komplexnější a díky jejich velikosti se rychle načítají. Navíc neztrácejí kvalitu při zobrazení na velkých monitorech.
Světlá budoucnost?
Doufejme. Již dříve tu byl Flash, který se nakonec používal i na to, na co by se raději používat neměl. Nakonec byla jeho podpora tak problematická, že se mu vývojáři začali vyhýbat. SVG má oproti Flashi nesporné výhody. Uvidíme časem kam až se dopracuje a zda se osvědčí jako magické řešení grafiky na responzivních webech.
