Rastrová versus vektorová reprezentace

Rastrová (bitmapová) grafika ukládá obraz jako mřížku barevných bodů – pixelů. Při zvětšení nad nativní rozlišení se jednotlivé body vizuálně projeví jako čtverce, takzvaná pixelizace. Vektorová grafika naproti tomu popisuje obraz pomocí geometrických primitiv: úsečky, křivky, oblouky a mnohostěny jsou vyjádřeny matematickými rovnicemi. Renderer je přepočítá pro libovolné výstupní rozlišení, takže výsledek je vždy ostrý.

Srovnání rastrové a vektorové grafiky při zvětšení
Srovnání rastrové a vektorové grafiky při různých úrovních zvětšení. Zdroj: Wikimedia Commons.

Praktický důsledek je přímý: logo firmy ve formátu SVG lze bez úprav použít jak na vizitce (50 × 20 mm), tak na billboardu (3 × 1,2 m). Totéž logo ve formátu JPEG by při takovém zvětšení bylo nepoužitelné.

Bézierovy křivky – základ vektorového tvarování

Nejdůležitějším stavebním prvkem vektorové grafiky jsou Bézierovy křivky, pojmenované po francouzském inženýrovi Pierru Bézierovi, který je v 60. letech 20. století aplikoval při navrhování karosérií vozidel Renault. Dnešní designový software – Inkscape, Adobe Illustrator i Affinity Designer – pracuje výhradně s kubickými Bézierovými křivkami (stupeň 3).

Kubická křivka je definována čtyřmi body: dvěma kotvami (začáteční a koncový bod) a dvěma řídicími body (handles), které určují tvar prohnutí. Polohováním řídicích bodů designér intuitivně modeluje libovolný plynulý tvar.

Animace kubické Bézierovy křivky
Animace kubické Bézierovy křivky: pohybující se bod sleduje dráhu definovanou čtyřmi kontrolními body. Zdroj: Wikimedia Commons.

Kvadratické vs. kubické křivky

Kvadratická Bézierova křivka (stupeň 2) má pouze jeden řídicí bod a nabízí menší tvarovací svobodu. Používá se v souborech TrueType (TTF) a ve formátu SVG jako příkaz Q. Kubická varianta (příkaz C v SVG) je standardem ve formátu PostScript a OpenType, proto ji preferují profesionální designéři.

V SVG syntaxi: M 10 80 C 40 10, 65 10, 95 80 popisuje kubickou křivku s počátkem v bodě (10,80), dvěma řídicími body (40,10) a (65,10) a koncem v bodě (95,80).

Formát SVG a jeho struktura

SVG (Scalable Vector Graphics) je textový formát XML vyvinutý konsorciem W3C. Specifikace SVG 2.0 je od roku 2018 doporučenou normou. Soubor SVG je čitelný v textovém editoru a přímou součástí HTML, což z něj činí přirozený formát pro webovou grafiku.

Základní SVG dokument vypadá takto:

Element Popis Příklad atributu
<svg> Kořenový element, definuje rozměry a viewport viewBox="0 0 100 100"
<path> Univerzální element pro Bézierovy cesty d="M 0 0 L 50 50"
<rect> Obdélník s volitelným zaoblením rohů rx="8"
<circle> Kružnice definovaná středem a poloměrem r="20"
<text> Textový obsah s podporou formátování font-family="Inter"

Ostatní vektorové formáty

EPS (Encapsulated PostScript)

EPS je starší formát odvozený od jazyka PostScript, který v 80. letech vytvořila firma Adobe. V tiskárenském prostředí se stále používá pro předání souborů do osvitových zařízení (RIP). Nevýhodou je, že EPS není nativně podporován webovými prohlížeči a vyžaduje konverzi pro digitální použití.

PDF jako vektorový kontejner

PDF (Portable Document Format) je v jádru vektorový formát – obsahuje PostScript popis stránek. Při exportu z designového softwaru zachovává vektorové křivky, fonty (vložené nebo nastínované) a barevné profily. PDF/X je podmnožina standardu určená pro předtiskové workflow.

AI (Adobe Illustrator)

Nativní formát aplikace Adobe Illustrator je proprietární a v novějších verzích programu vychází z PDF. Soubory .ai nejsou kompatibilní s jiným softwarem bez konverze, proto se doporučuje finální předávání ve formátu PDF nebo SVG.

Barva ve vektorové grafice

Vektorová grafika pracuje s barvou odlišně od rastrové. Každý tvar má přiřazenu barvu jako atribut, nikoli jako pixelové hodnoty. Pro webový výstup se používá barevný prostor sRGB, pro tiskový výstup CMYK nebo předdefinované barvy Pantone (PMS). Exportní nastavení barevného prostoru je kritická součást přípravy souborů pro tisk.

Logo formátu SVG
Oficiální logo formátu SVG – samo uložené jako SVG soubor. Zdroj: Wikimedia Commons / W3C.

Praktická doporučení

Pro každodenní vektorovou práci platí několik ustálených pravidel. Soubory SVG je vhodné před nasazením na web optimalizovat nástrojem SVGO, který odstraňuje redundantní metadata a zkracuje číselné hodnoty souřadnic. Výsledný soubor může být o desítky procent menší bez vizuální změny.

Fonty vložené do vektorových souborů určených k tisku je doporučeno nastínit (outline) – převést na křivky – aby tiskárna nepotřebovala mít příslušný font nainstalován. U souborů určených k dalším úpravám je naopak lepší fonty zachovat jako editovatelný text.

Další čtení