Jak převést obrázek na SVG: tři metody vysvětlené

1. Nejdřív posuďte: je váš obrázek vhodný k vektorizaci?

Podstatou vektorizace je překreslit pixelové obrysy jako křivky, takže výsledek závisí na materiálu: loga, ikony, linka a ploché ilustrace mají ostré hrany a omezenou barevnost, a proto se vektorizují nejlépe. Fotografie mají bohaté světlo a barevné přechody, takže po vektorizaci získají ilustrativní charakter, a ne fotorealistickou podobu. Obecně platí, že čím vyšší rozlišení a čistší hrany má originál, tím lepší bude výsledek — rozmazaný náhled vám dá jen rozmazané křivky.

2. Metoda jedna: automatická online vektorizace (nejrychlejší, doporučujeme začátečníkům)

Uvažujme nástroj Obrázek na SVG od PolySVG — celý proces trvá několik desítek sekund:

1. Nahrajte obrázek: přetáhněte soubor, klikněte pro výběr, nebo vložte snímek obrazovky ze schránky. Podporujeme PNG, JPG i WEBP a můžete vstoupit i přes vstupy dělené podle formátu, například PNG na SVG nebo JPG na SVG;
2. Vyberte předvolbu: předvolby fotka, ikona, logo, linka a obrys mají každá parametry přizpůsobené jinému typu materiálu;
3. Doladte parametry: počet barev, vyhlazení i sílu detailu lze upravit. Generujte a výsledky porovnávejte — méně barev znamená čistší plochy a menší soubor;
4. Odstraňte pozadí a stáhněte: jedním kliknutím odstraníte pozadí a získáte průhledný výsledek, SVG si stáhnete nebo pokračujete v editoru.

Pod povrchem probíhá vlastní model vektorizace, který zvládne kvantizaci barev, sledování obrysů a proložení křivek Bézier. Celý proces je zdarma a nevyžaduje registraci.

U dávky materiálu držte stejnou předvolbu a stejné parametry, aby styl zůstal jednotný; při hromadném zpracování každý obrázek prohlédněte, aby složité pozadí nezanechalo zbytky, a případně jednotlivé soubory převeďte znovu s jinými hodnotami.

3. Metoda dva: trasování obrázku v grafickém programu (pro ty, kdo program už mají)

Používáte-li Illustrator: vložte bitmapu, otevřete panel trasování obrázku a zvolte předvolbu jako „Černobílé logo“ nebo „6 barev“, upravte práh, počet cest a úhly, po dokončení klikněte na Rozšířit a převeďte na upravitelné cesty a nakonec odstraňte pozadí a nečistoty. Bezplatný Inkscape nabízí stejnou schopnost v nabídce Cesta → Trasovat bitmapu a pracuje s podobnou logikou parametrů.

Tato metoda dává jemnou kontrolu a vyhovuje lidem, kteří mají s programy zkušenost a chtějí přesně doladit parametry. Nevýhodou je nutnost se software seznámit a také čas strávený laděním.

4. Metoda tři: ruční překreslení perem (nejvyšší kvalita, nejvíce času)

U log s extrémní přesností profesionální designéři položí bitmapu jako podklad, zamknou ji a obrysy překreslí nástrojem pero. Ručně vedené cesty mají nejméně kotev, nejčistší křivky a nejmenší soubory — jsou kvalitním stropem vektorizace — ale jedno logo může zabrat desítky minut až hodiny. Pokud spěcháte, nejdřív vektorizujte automaticky a pak v editoru doplňte přerušené tahy štětcem; výsledek bývá zpravidla dostatečný.

5. Kontrola a optimalizace po převodu

• Zvětšete a zkontrolujte hrany: zvětšete nad 400 % a hledejte přerušené tahy, nečistoty a zuby;
• Odstraňte nečisté cesty: v online SVG editoru klikněte na malé barevné plochy, které po vektorizaci zůstaly, a smažte je;
• Udržujte počet barev pod kontrolou: je-li soubor příliš velký, vraťte se ke kroku převodu, snižte počet barev a vygenerujte znovu;
• Komprimujte soubor: snižování počtu kotev a odstraňování metadat popisuje 8 tipů na optimalizaci a kompresi SVG.

Shrnutí: chcete-li rychlost, použijte automatickou online vektorizaci, chcete-li kontrolu, trasujte v programu, chcete-li maximum, překreslete perem. Pro většinu potřeb stačí první metoda plus trochu úprav v editoru.