Co je to SVG: Kompletní průvodce formátem, který musíte znát!

Vektorová grafika je nedílnou součástí moderních webových projektů. A právě formát SVG představuje ideální řešení pro implementaci log, ikon, diagramů a dalších vektorových prvků na webu.

Na rozdíl od rastrových formátů SVG uchovává informace o tvarech, takže si zachovává kvalitu při libovolném přiblížení či oddálení. Navíc umožňuje animace, interaktivní ovládání a další pokročilé techniky.

V tomto článku se podíváme, co SVG vlastně je, jak funguje a jak ho efektivně využít při vývoji webu.

Co je to SVG a proč je tak revoluční?

Scalable Vector Graphics (SVG) je formát vektorové grafiky založený na XML, který zažívá v posledních letech velký rozmach.

Na rozdíl od rastrových formátů jako PNG či JPG SVG ukládá informace o tvarech, nikoliv o jednotlivých pixelech. To mu dává řadu výhod:

Škálovatelnost

Obrázky SVG si uchovávají ostrost při libovolném zvětšení či zmenšení. Neztrácejí kvalitu, proto je lze použít pro responzivní design.

Animace a interaktivita

SVG podporuje animace, transice a různé interaktivní prvky přímo v kódu. Lze tak vytvářet živé ikony, infografiku či prezentace.

Komprese a optimalizace

I přes vektorovou povahu má SVG dobrou kompresi. Navíc jej lze optimalizovat odstraněním nepotřebných dat.

Kompatibilita

SVG je podporováno většinou prohlížečů a také prezentačními a DTP programy. Lze jej jednoduše sdílet a upravovat.

Univerzálnost

SVG slouží pro vektorovou grafiku na webu i v tištěných materiálech. Používá se pro loga, diagramy, mapy a mnoho dalšího.

Jak funguje formát SVG?

SVG je založeno na XML značkovacím jazyce. Obsahuje řadu elementů pro definování tvarů, textu, gradientů a dalších vlastností grafiky.

Základní struktura SVG vypadá takto:

xml

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- tvarové elementy a grafika --> </svg>

Uvnitř kořenového <svg> elementu se pak vkládají dílčí tvary pomocí elementů jako <circle>, <rect> a dalších.

Atributy elementů definují barvu, pozici, velikost a další vlastnosti. SVG tak dovoluje programovat grafiku přímo v kódu.

Existuje několik způsobů jak SVG integrovat na webové stránky:

• Objektem <object>
• Pomocí elementu <img>
• Inline přímo v HTML kódu
• Externím souborem .svg

Výhodou inline SVG je lepší přístup pro úpravy a stylování CSS. Externí soubor se hodí pro opakované použití grafiky.

Jak vytvářet vlastní grafiku v SVG?

I bez znalosti programování lze v SVG vytvářet působivou vektorovou grafiku. Stačí znát základní tvary a cesty:

Základní tvary

• <circle> – kruh definovaný poloměrem
• <rect> – obdélník určený šířkou, výškou a pozicí
• <ellipse> – elipsa zadaná parametry
• <line> – přímka mezi dvěma body
• <polygon> – mnohoúhelník z bodů

Tyto tvary lze například vyplnit barvou pomocí atributu fill. Obrysy definuje stroke. Šířku čáry určuje stroke-width.

Cesty

Složitější obrazce lze vytvořit pomocí elementu <path>. Ten obsahuje atribut d s instrukcemi pro kreslení křivek:

xmlCopy code

<path d="M100 100 L300 100 L200 300 z"/>

K dispozici je mnoho příkazů jako M (move to), L (line to), C (curve) či Z (close path). Jejich kombinací vznikají libovolné cesty.

Transformace, efekty a animace v SVG

SVG nabízí bohaté možnosti úprav grafiky přímo v kódu:

• Transformace – posun, rotace, zvětšení, zkosení
• Filtry – rozostření, zvýraznění hran, stíny
• Maskování a klipování tvarů
• Gradienty a přechody výplně
• Animace pohybu, změny tvarů atd.

Díky tomu lze SVG použít pro tvorbu živých interaktivních prvků uživatelského rozhraní nebo vizualizací.

K animacím se využívá element <animate> a atributy jako begin, dur, from a to pro definování časování a hodnot.

Kde je vhodné tento formát používat

Díky své flexibilitě nachází SVG široké uplatnění v digitální grafice:

Webové stránky a aplikace

SVG je ideální pro ikony, loga, schémata a další vektorovou grafiku na webu. Lze jej dobře optimalizovat a použít responsivně.

Uživatelské rozhraní

Komponenty UI založené na SVG se dají snadno animovat a interaktivně ovládat JavaScriptovými knihovnami.

Infografika a vizualizace

S pomocí SVG vytvoříte libovolné diagramy, grafy, schémata, mapy a podobné infografiky.

Prezentace a dokumenty

Vektorová grafika v SVG je vhodná pro prezentační materiály, plakáty, letáky i dokumenty.

Loga, ikony a ilustrace

SVG je ideální pro tvorbu log, ikon a ilustrací díky své kvalitě při libovolném zvětšení.

Jak optimalizovat a konvertovat SVG?

Pro použití na webu je vhodné SVG optimalizovat. Lze provést následující kroky:

• Odstranit nepotřebné atributy
• Zjednodušit tvary a cesty
• Sloučit vrstvy do <g> elementů
• Použít gzip kompresi
• Konvertovat na WebP

Konverze do jiných formátů je také snadná – SVG lze exportovat do PNG, JPG, PDF, EPS a dalších běžných formátů.

Online konvertory umožňují snadnou konverzi SVG například před vložením do WordPressu. Kvalita vektorové grafiky se tak zachová.

Nejlepší alternativy

I přes mnohé výhody má SVG i své limity. Existují i další způsoby, jak vytvářet vektorovou či rastrovou grafiku pro web:

Rastrová grafika

Formáty jako PNG, JPG a GIF jsou stále dominantní pro fotografie a obrázky na webu. Na rozdíl od SVG ale trpí horší kompresí a kvalitou při zvětšení.

Canvas

Canvas umožňuje kreslení 2D grafiky pomocí JavaScriptu. Na rozdíl od SVG není založený na vektorech. Hodí se pro náročnější vizualizace.

WebGL

WebGL využívá 3D akceleraci GPU pro pokročilou počítačovou grafiku přímo v prohlížeči. Umožňuje vytvářet 3D objekty a scény.

Vektorové editory

Pro tvorbu komplexní vektorové grafiky je stále vhodnější použít specializované editory jako Illustrator, Inkscape, Sketch apod.

7 nejlepších nástrojů pro práci s SVG

Při práci se SVG se hodí mít po ruce tyto užitečné nástroje:

1. Inkscape – open-source vektorový editor
2. SVGOMG – optimalizátor SVG souborů
3. SVG Crowbar – Chrome extension pro extrakci SVG z webu
4. Method Draw – online nástroj pro úpravy SVG
5. SVG Validator – validátor formátu SVG
6. SVGO – Node.js knihovna pro optimalizaci
7. SVG.js – JavaScriptová knihovna pro tvorbu SVG

S pomocí těchto nástrojů lze SVG snadno vytvářet, upravovat, optimalizovat, validovat a integrovat na web.

Často Kladené otázky

Shrnutí výhod

Vektorová grafika ve formátu SVG přináší celou řadu výhod:

• Kvalita při libovolném zvětšení – SVG si zachovává ostrost při jakémkoliv zoomu.
• Nižší velikost souborů – ve srovnání s rastrovými formáty má SVG dobrou kompresi.
• Animace a interaktivita – SVG podporuje animace, transformace a události.
• Univerzálnost – SVG lze použít na webu i v tištěných materiálech.
• Jednoduchá úprava – SVG lze snadno editovat a upravovat v kódu i grafických editorech.

Z těchto důvodů je SVG ideální volbou pro moderní responsive design a interaktivní webové aplikace.