„Pošlete nám to ve vektoru." Tuhle větu jednou dostanete od tiskárny nebo od grafika. A když nebudete vědět, co po vás chtějí, skončí to rozmazaným logem na vizitkách. Tak si to vyjasníme, bez grafického žargonu.
Vektorová grafika je obrázek uložený jako matematický popis tvarů: křivky, body, výplně. Rastrová grafika (každá fotka, JPG, PNG) je naproti tomu mřížka barevných bodů. Z toho plyne jediný rozdíl, na kterém záleží: vektor můžete zvětšit na jakoukoliv velikost a zůstane ostrý, rastr se při zvětšení rozmaže.
Grafička nejsem a logo vám nenakreslím — k vektorům jsem se dostala přes SEO. Potkávám je při auditech webů, kde logo visí v pomalém PNG, i u vlastního webu, kde ho mám v SVG. Takže tenhle článek je pohled člověka, který grafiku objednává, přebírá a nasazuje na web. Přesně to, co nejspíš potřebujete taky.
Co je vektorová grafika
Rastrový obrázek je hotová mozaika: soubor si pamatuje barvu každého kamínku. Když mozaiku zvětšíte, kamínky se jen roztáhnou a počítač musí dopočítávat, co je mezi nimi. Výsledek znáte — rozmazané hrany.
Vektorový soubor je místo toho návod k nakreslení: „veď křivku z bodu A do bodu B, vyplň ji touhle modrou." Počítač si obrázek z návodu vykreslí pokaždé znovu, přesně pro velikost, kterou zrovna potřebuje. Proto stejný soubor funguje jako ikonka o 24 pixelech i jako polep na dodávce.
Jedno omezení je vidět hned: fotka nikdy vektorová nebude, fotoaparát zachycuje body, ne křivky. Vektory jsou doma tam, kde se kreslí — loga, ikony, písmo, schémata, jednodušší ilustrace, technické výkresy.
Vektorová vs. rastrová grafika
Praktické pravidlo z toho plyne jednoduché: logo a ikony ve vektoru, fotky v rastru. Nic víc si pamatovat nemusíte.
A jak vypadá průšvih, když se to poplete? Z webu se stáhne logo jako JPG o 200 × 200 pixelech a pošle se do tiskárny na roll-up vysoký dva metry. Jeden pixel původního obrázku by na banneru měřil skoro centimetr — logo by vypadalo jako koupelnová mozaika. Tiskárna to naštěstí obvykle zarazí a napíše vám právě tu větu z úvodu.
Nechce se vám tohle všechno řešit vlastními silami? Přesně tyhle věci dělám za majitele firem každý den. Pošlete mi adresu webu a do 48 hodin víte, co vás v Googlu brzdí a co bych opravila jako první — zdarma a bez závazku.
Formáty vektorové grafiky
SVG (Scalable Vector Graphics) je standard pro web. Otevřený formát, zvládá ho každý prohlížeč a uvnitř je to obyčejný textový kód — SVG jde stylovat přes CSS a dokonce animovat. Když od grafika chcete jeden formát „na web", chtějte SVG.
AI je nativní formát Adobe Illustratoru, ve kterém většina profesionálů kreslí. Je to zdrojový soubor pro budoucí úpravy — schovejte si ho, i když ho sami neotevřete.
EPS je starší tiskový formát. Dnes už ho vytlačuje PDF, ale některé tiskárny a řezací plotry ho pořád chtějí. Sami ho vyrábět nemusíte, jen vězte, že existuje.
PDF umí nést vektory bez ztráty — export loga z Illustratoru do PDF zůstane křivkami. Pro tisk je to dnes nejběžnější cesta.
Jedna past na závěr: PDF i SVG můžou mít uvnitř jen vloženou rastrovou fotku. Přípona sama o sobě vektor nezaručuje. Test je naštěstí snadný: otevřete soubor a přibližte na maximum. Ostré hrany = vektor. Rozmazané „schody" = rastr v převleku.
Co chtít od grafika (checklist na jedno přečtení)
Tohle je část, která vám ušetří nejvíc peněz. Při zadávání a přebírání loga nebo firemní grafiky chtějte:
- zdrojový soubor (AI, případně SVG) — ne jen exporty do PNG,
- SVG pro web a PDF pro tisk,
- verzi v jedné barvě (černá/bílá) — na razítka, gravírování a potisky se hodí dřív, než čekáte.
Grafik, který vám pošle logo jen v JPG a zdrojové soubory „si nechává", je varovný signál. Zaplatili jste za logo, křivky k němu patří. Bez nich budete při první změně velikosti nebo barvy platit znovu — typicky za ruční překreslení, což je práce na hodiny až dny podle složitosti loga.
Když už logo máte a vektorovou verzi k němu ne, dá se rastr převést automaticky (Adobe Illustrator má funkci Image Trace, online to umí třeba vectorizer.ai). U jednoduchých tvarů to dopadne slušně, u složitějších log bývá výsledek křivý a stejně skončí u ručního překreslení. Pro cokoliv důležitého doporučuji rovnou grafika.
SVG na webu: tři důvody, proč ho tam chtít
Teď část, kterou řeším skoro na každém technickém auditu. Vektorová grafika není jen věc tisku, na webu má tři hmatatelné výhody.
Velikost. Logo na tomhle webu je SVG o 853 bajtech. Ani ne kilobajt — stáhne se dřív, než to stihnete zaregistrovat. Stejné logo v PNG, aby bylo ostré i na displejích s vysokým rozlišením, by mělo klidně desítky kilobajtů. U jednoho loga je to jedno, u webu s dvaceti ikonami už ne.
Ostrost všude. SVG se vykresluje pro konkrétní displej, takže je ostré na starém monitoru i na novém telefonu. S PNG ikonami musíte dodávat víc velikostí a stejně někde narazíte.
Rychlost, kterou Google měří. Menší soubory znamenají rychlejší načtení, a to se propisuje do metrik Core Web Vitals, podle kterých Google web hodnotí. Vektory samy o sobě pozice nezvednou, ale těžké obrázky je umí stáhnout dolů — a právě loga a ikony jsou nejlevnější místo, kde web odlehčit.
Dvě poctivé poznámky, ať to nevypadá, že SVG je odpověď na všechno. Zaprvé: na fotky nefunguje, tam patří WebP nebo AVIF. Zadruhé: složitá ilustrace s mnoha detaily může být v SVG paradoxně větší než tatáž věc ve WebP — vektor se vyplácí u čistých tvarů, ne u malovaných obrazů.
Drobnost, na kterou se zapomíná: SVG vloženému přes <img> pište alt text jako každému jinému obrázku a soubor pojmenujte popisně (logo-firmy.svg, ne image1.svg). Vyhledávače to čtou.
Nechcete to řešit sami? Pošlete mi adresu webu — do 48 hodin víte, co ho v Googlu brzdí.
Kde vektorovou grafiku vzít
Nakreslit si ji. Zdarma v Inkscape (plnohodnotný vektorový editor) nebo ve Figmě, profesionálové sedí v Adobe Illustratoru. Na jednoduchou ikonu nebo schéma stačí kterýkoliv z nich.
Stáhnout hotovou. Banky ikon jako Flaticon nebo SVG Repo mají statisíce vektorů. Pozor jen na licence: „zdarma" často znamená „zdarma s uvedením autora" a pro logo firmy se stažená ikona nehodí vůbec — nebude vaše a potkáte ji u konkurence.
Nechat si ji udělat. Pro logo a firemní identitu jediná cesta, kterou bych podepsala. A vraťte se k checklistu výš: zdrojové soubory k dodávce patří.
Časté otázky
Co je vektorová grafika jednoduše?
Obrázek uložený jako popis tvarů (křivek), ne jako body. Díky tomu ho lze zvětšit na libovolnou velikost a zůstane ostrý. Typicky se tak ukládají loga, ikony a písmo.
Jaký je rozdíl mezi vektorovou a rastrovou grafikou?
Vektor je návod k nakreslení, rastr je hotová mřížka bodů. Vektor se zvětšuje bez ztráty, rastr se rozmazává. V praxi: co vzniklo kreslením, má být vektor; co vzniklo focením, je vždycky rastr.
Jaké formáty patří mezi vektorové?
SVG (web), AI (zdrojový formát Illustratoru), EPS (starší tiskový formát) a PDF s vektory. Občas narazíte i na CDR z CorelDRAW. Když si nejste jistí, co poslat tiskárně, pošlete PDF s vektory — s tím si poradí každá.
Dá se JPG logo převést na vektor?
Automaticky ano (Image Trace v Illustratoru, vectorizer.ai), ale u složitějších log bývá výsledek nepřesný. Automatický převod berte jako nouzovku pro jednoduché tvary; logo, které firmu ponese roky, nechte překreslit ručně.
Rozmazané logo poznáte sami. Pomalý web ne
Vektor vs. rastr teď rozhodnete sami: logo a ikony v SVG, fotky ve WebP, zdrojové soubory do šuplíku. To je celá věda.
Jestli váš web brzdí něco víc než formát loga, na oko to nepoznáte — ale změřit se to dá. Pošlete mi tedy adresu webu. Změřím ho zdarma a nejpozději za dva dny máte výsledky i s vysvětlením, kde web ztrácí rychlost a pozice ve vyhledávání.
