6 výhod vektorové grafiky SVG

Výhoda 1: neomezené škálování bez zkreslení

SVG popisuje tvary pomocí matematických cest a při zvětšení se prohlížeč prostě překreslí v nové velikosti. Ikony zůstávají ostré na displejích Retina a logo zvětšené na velikost billboardu je stále čisté — nemusíte připravovat několik rozlišení jako u bitmapy. To je jádro výhody vektorové grafiky a důvod, proč se loga a ikony musí vektorizovat. U responzivních stránek pokrývá jedna ikona SVG všechny scénáře od telefonu po 4K displej, takže není potřeba kreslit obrázky zvlášť pro každé zařízení.

Výhoda 2: malé soubory a rychlé načítání stránek

SVG jednoduché ikony má často jen několik kB — mnohem méně než sada PNG v několika rozlišeních. A protože je SVG text, gzip i Brotli ho zkomprimují mimořádně dobře a přenášená velikost klesne ještě o šedesát až osmdesát procent. Na stránce plné ikon tak přechod na SVG výrazně sníží spotřebu pásma. Samozřejmě je potřeba u složitějších ilustrací hlídat počet cest, podrobnosti najdete v tipu na optimalizaci SVG. Jakmile ikony přejdou na SVG, celkový objem požadovaných obrázků nad prvním náčrtem často klesne o více než polovinu, což je zvlášť přínosné na pomalém připojení.

Výhoda 3: programovatelnost, interakce a animace

SVG je součástí DOM: pomocí CSS změníte výplň ikony, JavaScriptem roztočíte animaci kreslení tahem a můžete reagovat na kliknutí i přejetí kurzoru. Přepnutí barev ikon v temném režimu, zvýraznění části grafu při přejetí i načítací animace — to vše zvládnete přímo v SVG, bez výměny obrázku a bez animací po jednotlivých snímcích. Rastrové formáty tohle neumí. Nejvíc z toho těží datová vizualizace: každý sloupec i každý úsek čáry v grafu je samostatná cesta, takže se na ně dají přímo navázat události pro zvýraznění nebo rozbalení detailu.

Výhoda 4: editovatelný text, přátelský k SEO a přístupnosti

Text uvnitř SVG je skutečný text — lze jej vybrat, vyhledat a přeložit. Doplníte-li grafice popisky <title> a <desc>, umí je přečíst odečítač obrazovky a vyhledávače porozumí významu grafiky. Text v bitmapě jsou jen pixely, pro vyhledávače i uživatele odečítačů je neviditelný. Vícejazyčné weby navíc dokážou přeložit text uvnitř SVG přímo, bez nového vykreslení obrázku.

Výhoda 5: jeden zdrojový soubor pro všechna použití

Totéž SVG funguje na stránce, dá se exportovat jako vysoce rozlišený PNG do dokumentu a předat tiskaři či laserovému rytiči. Při změně firemní barvy upravíte jediný zdrojový soubor a všechna použití se aktualizují najednou, místo abyste znovu dělali každou velikost. Pro tým to znamená výrazně nižší náklady na údržbu materiálů. Zvlášť profitují e-shopy a brandové týmy: jediná vektorizace se znovu použije na detail produktu, obal i veletržní grafiku a změna barvy znamená správu jediného zdrojového souboru.

Výhoda 6: otevřený standard a vyspělý ekosystém

SVG je otevřený standard W3C, který každý moderní prohlížeč podporuje nativně a nástroje jako Illustrator, Figma či Inkscape umí číst i zapisovat, takže žádná vazba na jednoho dodavatele. Objektivně má SVG ale také své meze: není vhodné pro fotografie, při příliš složitých cestách klesá výkon vykreslování a fotografie mají zůstat v JPG či WEBP. Otevřená komunita kolem SVG také vytvořila vyspělou sadu nástrojů — kompresi SVGO, knihovny ikon a animací — připravených k použití.

S SVG začínáte? nástrojem Obrázek na SVG převeďte své bitmapy na vektory, nebo si prohlédněte a stáhněte bezplatné vektorové materiály v galerii PolySVG. Pro začátek si přečtěte Co je SVG a Rozdíl mezi PNG a SVG.