Vektorová grafika je obrázek popsaný matematickými tvary, ne pixely - proto ho lze zvětšit na jakoukoliv velikost bez ztráty ostrosti. Jejím protipólem je rastrová grafika (fotky, JPG, PNG), která se při zvětšení rozmazává, protože má pevný počet bodů.
Jaký je rozdíl mezi vektorem a rastrem?
Rastrový obrázek je mřížka barevných bodů, přesně jako fotografie - má pevný rozměr v pixelech a při zvětšení nad tento rozměr se rozostří. Vektorový obrázek naopak obsahuje instrukce, jak tvar nakreslit - „čára odsud potud", „kruh o tomto poloměru". Prohlížeč nebo tiskárna si tvar dopočítá znovu podle aktuální velikosti, takže hrana zůstává ostrá na vizitce i na billboardu.
Nejjednodušší laická zkouška: vektor umí zvětšit malé logo z webu na velký billboard a pořád bude vypadat čistě. Fotku takhle zvětšit nejde, rozpadne se na viditelné čtverečky.
Kdy použít vektor a kdy rastr?
Vektor patří na loga, ikony, ilustrace, diagramy a grafy - všude tam, kde je grafika tvořena tvary a plochami, ne jemnými barevnými přechody. Rastr patří na fotky, screenshoty a cokoliv s bohatou barevností, kterou by vektor musel nesmyslně komplikovaně popisovat.
Na webu se vektorová grafika ukládá nejčastěji jako SVG, tedy formát navržený přímo pro prohlížeče. Mimo web se používá i EPS nebo AI (Illustrator). Z rastrových formátů se dnes na webu vedle klasického PNG čím dál víc prosazuje WebP, který je při stejné kvalitě podstatně menší než JPEG.
Proč by mělo být firemní logo ve vektoru?
Logo skončí na desítkách míst v různých velikostech - vizitka, hlavička webu, Favicon v záložce prohlížeče, profilovka na sociálních sítích, třeba i polep na autě nebo roll-up na veletrhu. Pokud grafik dodá logo jako vektor, funguje všude z jednoho zdrojového souboru. Pokud dodá jen rastrový PNG v jedné velikosti, dřív nebo později přijde situace, kdy je potřeba logo větší, než jaké PNG má, a výsledek je rozmazaný.
Praktická rada: logo si nechte od grafika vždy i ve vektoru (SVG nebo EPS), i když ho běžně používáte jako PNG. Vektorová verze je zdrojový soubor, ze kterého se dá dopočítat cokoliv - obráceně to nejde.
Když stavím web na míru, řeším i tohle - jestli klient má logo ve správném formátu, a pokud ne, pomůžu to dohledat nebo doporučím grafika. Víc o tom, jak takový web vzniká, najdete u tvorby webových stránek na míru →.
Kde má vektor limity?
Fotografie a realistické obrázky s tisíci barevnými přechody se vektorem popsat nedají rozumně - soubor by byl obrovský a stejně by nevypadal jako fotka. Vektor je silný tam, kde je obraz tvořen jasnými tvary a plochami barvy, ne tam, kde jde o realistickou barevnou hloubku.
Druhý limit je praktický: ne každý nástroj a ne každé místo na webu vektor přijme beze zbytku (viz upload, e-mailové klienty), takže logo je dobré mít připravené i v rastrové záloze pro Rychlost webu i kompatibilitu.
Můj pohled
Loga a grafiku chci vždy ve vektoru, bez výjimky. Neřeším to jako detail navíc, ale jako základní požadavek na každý projekt - designér mi vektorový soubor dodá vždycky, ať jde o klientské logo, ikonu v aplikaci nebo grafiku pro tisk. Ušetří to problémy později, kdy potřebujete grafiku jinde a jindy, než na jakou velikost byla původně dělaná.
Konkrétně, jak vektorová grafika funguje na webu a proč je pro loga a ikony nejlepší volbou formát SVG, rozebírám v hesle SVG. Pokud nevíte, jestli máte svoje logo ve vektoru, stačí se podívat, jestli se dá otevřít a upravit v Illustratoru nebo Figmě - pokud ano, je to 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.
