Vektorová grafika

Co je vektorová grafika?

Vektorová grafika je typ obrázku, který je vytvořen pomocí matematických vzorců místo jednotlivých barevných bodů (pixelů). Díky tomu můžete vektorový obrázek zvětšit na libovolnou velikost bez ztráty kvality – bude stále perfektně ostrý. Představte si rozdíl mezi kreslením podle předem daného návodu (vektor) a skládáním obrázku z barevných kostek LEGO (rastr).

Pro majitele webu je vektorová grafika praktický nástroj. Logo vaší firmy by mělo být vektorové – pak ho použijete jak na vizitkě, tak na obřím billboardu bez ztráty kvality. Na webu vektorová grafika znamená menší velikost souborů, rychlejší načítání a dokonale ostré zobrazení i na obrazovkách s vysokým rozlišením (jako jsou moderní mobilní telefony nebo 4K monitory).

V praxi vektorové obrázky poznáte podle přípony souboru – nejčastěji SVG (Scalable Vector Graphics), ale také AI (Adobe Illustrator) nebo EPS. Na webu se téměř výhradně používá formát SVG, který funguje přímo v prohlížeči bez potřeby speciálních pluginů. Vektorové obrázky jsou ideální pro loga, ikony, ilustrace, grafy nebo textové prvky.

Důležité je pochopit, že vektorová grafika má svá omezení. Není vhodná pro fotografie nebo složité obrazy s mnoha barevnými přechody a detaily. Pro tyto účely se používá rastrová grafika (JPEG, PNG). Vektory jsou nejlepší pro jednoduché, čisté grafické prvky s jasnými obrysy a plochými barvami. Právě proto jsou perfektní pro webdesign.

Jak vektorová grafika funguje?

Zatímco rastrový obrázek je mřížka barevných bodů (jako mozaika), vektorový obrázek je sada instrukcí: "nakresli kruh se středem v tomto bodě a poloměrem X pixelů, vybarvi ho modrou barvou". Když obrázek zvětšíte, prohlížeč prostě nakreslí větší kruh podle stejného návodu. Výsledek? Stále dokonale ostrý kruh.

Vektorové obrázky se skládají z cest (paths) – to jsou čáry a křivky definované matematicky. Můžete mít přímku, křivku (Bézierovu křivku), kruh nebo složitější tvar. Každá cesta má vlastnosti jako barva výplně, barva obrysu, tloušťka čáry. Z těchto základních prvků vznikají komplexní ilustrace.

Pro tvorbu vektorové grafiky potřebujete speciální software jako Adobe Illustrator, Affinity Designer nebo bezplatný Inkscape. V těchto programech kreslíte pomocí nástrojů pro cesty, tvary a text. Výsledek exportujete jako SVG soubor, který nahrajete na web. Na webu funguje SVG přímo v HTML kódu – můžete ho dokonce upravovat pomocí CSS nebo JavaScriptu.

SVG soubor je textový soubor ve formátu XML. Pokud ho otevřete v textovém editoru, uvidíte kód, který popisuje tvary:

<!-- Příklad SVG kódu - červený kruh -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<!-- Tento kód říká: nakresli kruh se středem
v bodě 50,50, s poloměrem 40 a vybarvi ho červeně -->

Nemusíte rozumět kódu – vaše grafické software ho vytváří automaticky. Ale je užitečné vědět, že SVG je textový formát, který můžete upravovat nebo optimalizovat.

Výhody vektorové grafiky pro web

• Neomezená škálovatelnost bez ztráty kvality

Největší výhoda vektorů je, že můžete obrázek zvětšit na libovolnou velikost a bude stále dokonale ostrý. Logo na webu bude vypadat stejně dobře na mobilu jako na 50palcovém monitoru. Nemusíte vytvářet různé verze obrázku pro různá zařízení – jeden soubor funguje všude.

• Menší velikost souborů

Vektorové obrázky jsou často výrazně menší než rastrové obrázky stejného obsahu. Logo v SVG může mít několik kilobajtů, zatímco PNG verze stovky kilobajtů. Menší soubory znamenají rychlejší načítání webu a lepší výkon (performance). A rychlost přímo ovlivňuje SEO i uživatelskou zkušenost.

• Editovatelnost a flexibilita

Vektorový obrázek můžete snadno upravit – změnit barvy, velikost jednotlivých prvků nebo tvar. U rastrového obrázku byste museli vše překreslit. Na webu můžete měnit barvu SVG ikony pomocí CSS – třeba při najetí myší změní ikona barvu. To s PNG nebo JPEG nejde.

• Dokonalé zobrazení na všech obrazovkách

Moderní mobily a monitory mají vysokou hustotu pixelů (Retina displeje). Rastrové obrázky na nich můžou vypadat rozmazané. Vektorové obrázky jsou vždy ostré bez ohledu na rozlišení obrazovky. Pro profesionální dojem webu je to klíčové.

• Snadná integrace do webdesignu

SVG můžete vkládat přímo do HTML kódu, upravovat pomocí CSS a animovat pomocí JavaScriptu. Můžete vytvořit interaktivní ilustrace, animovaná loga nebo dynamické grafy. S rastrovými obrázky byste to nezvládli nebo byste potřebovali složitější řešení.

• Přístupnost a SEO

Text v SVG je skutečný text – vyhledávače ho můžou indexovat a čtečky obrazovky přečíst. Na rozdíl od textu v PNG obrázku, který je jen "obrázek textu" bez sémantického významu. To zlepšuje přístupnost webu i jeho pozice ve vyhledávačích.

Rozdíl mezi vektorovou a rastrovou grafikou

Rastrová grafika (bitmapa) je složena z mřížky barevných bodů – pixelů. Každý pixel má přesně danou barvu a pozici. Když rastrový obrázek zvětšíte nad jeho původní rozlišení, pixely se zvětší a obrázek vypadá rozmazaně nebo "kostičkovaně". Typické rastrové formáty jsou JPEG, PNG, GIF nebo WebP.

Vektorová grafika je naproti tomu definována matematicky. Místo pixelů obsahuje instrukce pro kreslení tvarů. Protože prohlížeč překresluje tvary podle instrukcí při každém zobrazení, kvalita zůstává stejná bez ohledu na velikost. Vektorové formáty jsou SVG, AI, EPS nebo PDF.

V praxi to znamená:

• Fotografie = rastr

Fotografie zachycují realitu pixel po pixelu se stovkami barev a jemnými přechody. Vektorový formát by je nedokázal efektivně reprezentovat. Proto fotky z mobilu nebo fotoaparátu vždy používejte ve formátu JPEG nebo WebP.

• Logo = vektor

Logo má obvykle jednoduché tvary a omezený počet barev. Vektorový formát je ideální – logo můžete použít od favicon po billboard. Profesionální grafik vždy dodá logo v SVG nebo AI formátu.

• Ikony = vektor

Ikony na webu (navigační prvky, sociální sítě, šipky) by měly být vektorové. Jsou malé na datovou velikost, ostré na všech zařízeních a snadno se mění barvy pomocí CSS při hover efektech.

• Ilustrace = záleží na složitosti

Jednoduché ilustrace s plochými barvami fungují skvěle jako vektory. Realistické ilustrace s texturami a mnoha barevnými přechody jsou lepší jako rastr. Rozhodněte podle vizuálního stylu.

Formáty vektorové grafiky

• SVG (Scalable Vector Graphics)

Nejpoužívanější vektorový formát na webu. SVG funguje přímo v prohlížeči, můžete ho stylovat pomocí CSS a animovat JavaScriptem. Je to textový formát založený na XML, takže ho můžete editovat i v textovém editoru. Ideální pro loga, ikony a ilustrace na webu.

• AI (Adobe Illustrator)

Nativní formát Adobe Illustratoru. Obsahuje všechny funkce Illustratoru včetně vrstev a efektů. Používá se jako pracovní soubor při tvorbě grafiky. Pro web je nutné exportovat do SVG nebo PNG.

• EPS (Encapsulated PostScript)

Starší profesionální formát, stále používaný v tiskařském průmyslu. Dobře se sdílí mezi různými grafickými programy. Pro web není vhodný – je nutné převést na SVG nebo rastr.

• PDF (Portable Document Format)

PDF může obsahovat vektorovou grafiku (ne vždy). Používá se pro dokumenty a tiskové materiály. Pro web jako grafický formát není praktický, ale PDF loga můžete otevřít v Illustratoru a exportovat jako SVG.

Kdy použít vektorovou a kdy rastrovou grafiku

Použijte vektorovou grafiku pro:

• Loga a značky

Logo musí fungovat v různých velikostech od mobilní aplikace po billboard. Vektorový formát garantuje dokonalou kvalitu všude. Každá profesionální značka má logo v SVG nebo jiném vektorovém formátu.

• Ikony a symboly

Ikony na webu (šipky, checkmarky, ikony sociálních sítí) by měly být vektorové. Jsou malé na datovou velikost, ostré na všech zařízeních a snadno se mění barvy pomocí CSS.

• Ilustrace a grafické prvky

Pokud tvoříte vlastní ilustrace pro web (postavičky, abstraktní tvary, dekorativní prvky), vektory jsou ideální volba. Můžete je kdykoliv upravit a přizpůsobit designu.

• Grafy a infografiky

Datové vizualizace jako sloupcové grafy, koláčové grafy nebo schémata fungují skvěle jako vektory. Můžete je animovat nebo udělat interaktivní.

Použijte rastrovou grafiku pro:

• Fotografie

Fotky musí být rastrové (JPEG, WebP). Vektorový formát nedokáže zachytit komplexitu fotografického obrazu se stovkami barev a jemnými přechody. Pro fotografie na webu doporučuji moderní formát WebP s lazy loadingem.

• Složité obrazy s mnoha barvami

Realistické ilustrace, malby nebo obrázky s texturami a barevnými přechody fungují lépe jako rastr. Vektorová verze by byla příliš složitá a velká.

• Screenshoty a zachycení obrazovky

Když potřebujete zachytit, jak něco vypadá na obrazovce (rozhraní aplikace, tutoriál), použijete screenshot v PNG. Vektorová verze by nedávala smysl.

Jak vytvořit vektorovou grafiku

Pro tvorbu vektorové grafiky potřebujete vektorový grafický editor. Nejpopulárnější je Adobe Illustrator (placený, profesionální standard), ale existují i cenově dostupnější nebo bezplatné alternativy.

• Adobe Illustrator

Profesionální standard v oboru. Nejrozsáhlejší funkce, nejlepší podpora formátů. Součástí Adobe Creative Cloud (cca 600 Kč/měsíc). Ideální pro profesionální designéry.

• Affinity Designer

Jednorázová platba (cca 1700 Kč), žádné předplatné. Výkonný a profesionální nástroj. Skvělá alternativa k Illustratoru pro menší firmy a freelancery.

• Inkscape

Bezplatný a open-source. Zvládne většinu běžných úkolů. Rozhraní je trochu zastaralé, ale pro základní práci stačí. Ideální pro začátečníky nebo omezený rozpočet.

• Figma

Primárně nástroj pro UI/UX design, ale umí i základní vektorovou grafiku. Bezplatná verze pro jednotlivce. Skvělé pro webdesignéry, kteří tvoří ikony přímo v designovém nástroji.

Pokud nejste grafik, můžete využít hotové vektorové grafiky z knihoven jako Flaticon, Noun Project nebo unDraw. Mnoho ikon a ilustrací je dostupných zdarma nebo za malý poplatek. Stáhnete SVG soubor a vložíte na web.

Související pojmy