SVG (Scalable Vector Graphics) je webový formát pro vektorovou grafiku - loga, ikony a ilustrace v něm zůstanou ostré na jakékoliv obrazovce. Na rozdíl od JPG nebo PNG neukládá pixely, ale matematický popis tvarů, takže se dá zvětšovat bez rozmazání.
Jak SVG vlastně funguje?
SVG soubor je ve skutečnosti obyčejný text - XML kód s instrukcemi typu „nakresli čáru z bodu A do bodu B" nebo „vyplň tento tvar modrou barvou". Prohlížeč si podle nich obrázek dopočítá znovu při každé velikosti, proto je hrana vždycky ostrá, ať se logo zobrazí na vizitce nebo na billboardu.
Pozor na jednu věc: SVG soubor může mít uvnitř vložený bitmapový obrázek. Tehdy se zpixeluje stejně jako PNG, i když má příponu .svg. Přípona sama o sobě nic negarantuje, rozhoduje obsah souboru.
Proč se SVG hodí na loga a ikony?
Firemní logo se dnes zobrazuje na desítkách míst - Favicon v záložce, avatar na sociálních sítích, hlavička webu na mobilu i velký banner. SVG zvládne všechny tyto velikosti z jednoho souboru bez ztráty kvality. Grafik ho jednou vyexportuje z Figmy nebo Illustratoru a dál se s ním pracuje kdekoliv.
Stejně dobře funguje i na jednoduché ikony a diagramy v uživatelském rozhraní. Na fotky a barevně bohaté ilustrace se ale SVG nehodí - tam patří JPG, PNG nebo WebP.
Je SVG rychlejší než PNG nebo JPEG?
Směr je jasný: u jednoduchých log a ikon bývá SVG soubor řádově menší než jeho bitmapová verze, typicky o desítky procent. Konkrétní čísla se ale mezi zdroji hodně liší, takže je lepší brát je jako orientační, ne jako slib. Jako textový formát se navíc SVG dobře komprimuje přes gzip, což velikost dál sníží.
Menší obrázky obecně pomáhají rychlosti webu, kterou Google hodnotí v rámci Core Web Vitals. Přímý vliv konkrétně SVG na pozice ve vyhledávání ale žádný zdroj spolehlivě nepotvrzuje - jde spíš o vedlejší efekt lehčí stránky. Víc k tématu obrázků a rychlosti webu je v článku o velikosti obrázků na webu.
Podporují SVG všechny prohlížeče?
Ano, prakticky všechny moderní prohlížeče SVG zobrazí bez problémů, podpora se pohybuje kolem 97 %. Výjimkou je starší Internet Explorer, kde funguje jen částečně, a Outlook, který SVG v e-mailech vůbec nezobrazí - tam je potřeba mít logo i v PNG.
Weby stavím tak, aby loga a ikony jely vždycky v SVG a fotky ve webp nebo AVIF - žádné kompromisy kvůli šabloně. Když chcete web, kde tohle někdo hlídá od základu, mrkněte na tvorbu webu na míru →.
Je bezpečné nahrávat SVG na web?
Tady buďte opatrní. SVG je textový formát a umí obsahovat i spustitelný kód - třeba skript, který se spustí, jakmile se obrázek zobrazí. Pokud web dovolí uživatelům nahrávat vlastní SVG (avatar, logo klienta, příloha), bez ošetření hrozí, že si někdo nahraje soubor se skrytým škodlivým kódem.
Řešení je jednoduché: nikdy nedůvěřovat SVG souboru jen podle přípony a vždy ho na serveru vyčistit (sanitizovat), než se uloží a zobrazí ostatním. Zkontrolovat by to měl programátor při návrhu formuláře pro upload, ne až po nahlášeném problému.
Kdy SVG nepoužít?
Na fotky produktů, lidí nebo krajin. Vektor umí popsat tvary a barevné plochy, ne miliony jemných barevných přechodů na fotografii - výsledný soubor by byl obrovský a stejně by nevypadal dobře. Pro fotky zůstává standardem JPEG, PNG nebo modernější WebP a AVIF.
Můj pohled
SVG je pro mě formát číslo jedna. Chci ho vždy a vyžaduji ho po designérovi v týmu i po klientech - u loga, ikon, celé grafiky webu. Nejde jen o menší soubor. Jde o to, že web pak vypadá ostře na jakémkoliv zařízení, od starého telefonu po velký monitor s retina displejem, a nikdo to neřeší dodatečně.
Vektor vs. rastr, tedy co dělá SVG tak univerzálním, rozebírám podrobněji v hesle vektorová grafika. Pokud si nejste jistí, jestli má vaše logo správný formát, stačí se zeptat grafika nebo mi ho poslat - řeknu vám na první pohled, jestli je to opravdu vektor.
Pavel Szabo
Programátor webů, eshopů a informačních systémů s více než 23 lety praxe. Pomáhám firmám i jednotlivcům s online podnikáním, automatizacemi a využitím AI v praxi.
