Rozhraní

Jak vektorizovat ikonu

6 min čtení · Vydáno 2. 8. 2026 · Aktualizováno 2. 10. 2026

Ikona existuje ve všech velikostech najednou. Tentýž soubor je položka o 16 pixelech v menu, tlačítko o 24 pixelech, dlaždice aplikace o 512 pixelech a občas i plakát. To funguje jen tehdy, když je podkladová geometrie poctivá: málo uzlů, uzavřené cesty a žádný zbytkový lem po antialiasingu rasteru, se kterým jste začínali.

Vektorizace ikony se proto méně týká konverze a více toho, co do ní dáte a co po ní prořezáte. Tento průvodce pokrývá obojí.

Začněte od největšího rasteru a sjednoťte barvu

Antialiasing je tady nepřítel. U ikony o 32 pixelech tvoří měkké šedé pixely podél každé diagonály velkou část obrazu a vektorizační modul nemá jak poznat, že měly být tvrdou hranou, nikoli skutečným mezitónem. Dejte mu verzi o 512 pixelech a tatáž hrana je jedno pixelový přechod proti 49 čistým pixelům – tvar je nezaměnitelný.

Je-li ikona jednobarvená, udělejte z ní před konverzí skutečně jednobarvenou: čistě černou na průhledném pozadí, nebo čistě černou na bílém, bez měkkého stínu a bez jemné vnitřní záře. Každý z těchto efektů se ve výstupu stane tvarem a tvary ve výstupu jsou uzly, které je potřeba najít a smazat.

Výsledek posuzujte podle počtu uzlů, ne podle vzhledu při 100 %

V velikosti, ve které se na něj díváte, vypadá téměř jakékoli trasování dobře. Zkouška, která má význam, je počet uzlů: otevřete cestu a spočítejte body. Dobře nakreslená ikona má body jen tam, kde křivka doopravdy mění směr – zaoblený čtverec jich má osm, kruh čtyři, šíp tři nebo šest. Vrátil-li se jednoduchý tvar se šedesáti, modul honil pixelový šum a tento tvar se bude vykreslovat pomalu, špatně upravovat a po škálování bude vypadat jemně nesprávně.

Od tarifu Lite výš ovládá tohle přímo nastavení detailu: nižší detail slučuje důrazněji a dává méně, čistších uzlů. Snižujte, dokud se rohy jen začnou měkčit, pak ustupte o jeden krok. Na Free se úroveň volí automaticky a způsob, jak ji ovlivnit, je kvalita zdroje.

Na pixelovou mřížku zarovnávejte až poté

Sady ikon mají mřížku – obvykle 24×24 s bezpečným okrajem dvou pixelů, nebo 16×16 pro hustá rozhraní. Natrasovaná cesta dopadne tam, kde byly pixely, což je blízko té mřížky, ale ne na ní, a při malých velikostech vykreslování je právě „blízko“ tím, co způsobí, že jedna ikona v řadě vypadá o půl pixelu těžší než sousedé.

Hotové cesty přichyťte v editoru na celé souřadnice a nastavte viewBox SVG na svou mřížku. Poprvé je to krkolomné, poté mechanické, a právě to odděluje sadu ikon, která vypadá navržená, od sady, která vypadá převedená.

Jedna tloušťka, jeden styl, jeden soubor

Vytváříte-li celou sadu znovu, převeďte všechny ikony v jedné dávce, aby prošly identickým nastavením, a poté ručně srovnejte tloušťku tahů napříč sadou. Rodina ikon působí jako rodina proto, že se tahy shodují; sada trasovaná jednotlivě přes několik sezení se shodovat nebude a rozdíl je vidět, i když žádná jednotlivá ikona nevypadá špatně.

Dávková konverze začíná od tarifu Pro, který zpracuje 30 souborů najednou. Pod tím se soubory převádějí jeden po druhém, což pro sadu dvaceti znamená pár minut klikání, nikoli zátaras.

Krok za krokem

  1. 01

    Sežeňte největší rastrovou verzi

    512 pixelů a více, pokud existuje. Zdroj o 32 pixelech je z většiny antialiasing a antialiasing je to, v čem se vektorizační modul mýlí.

  2. 02

    Zploštěte na jedinou barvu

    Před konverzí odstraňte vrhané stíny, vnitřní záře a přechody. Každý z nich se ve výstupu stane dalšími tvary.

  3. 03

    Převeďte na SVG

    Nahrajte a stáhněte výsledek. SVG je nativní formát pro ikony na webu i v aplikacích.

  4. 04

    Zkontrolujte počet uzlů

    Otevřete cestu v editoru. Jednoduchý tvar má hrst bodů, ne desítky. Má-li desítky, zdroj měl šum.

  5. 05

    Přichyťte na mřížku ikon

    Zarovnejte cesty na celé souřadnice a nastavte viewBox na velikost své mřížky, aby se ikona vykreslila ostře při 16 i 24 pixelech.

Časté problémy

Ikona vypadá rozmazaně při 16 pixelech, i když je vektorová
Její cesty nejsou zarovnané na pixelovou mřížku, takže vykreslování antialiasuje každou hranu. Přichyťte souřadnice na celá čísla a nastavte viewBox podle své mřížky.
Jednoduchý tvar se vrátil s desítkami uzlů
Zdroj měl antialiasing nebo JPEG šum, který modul četl jako detail. Použijte větší, čistší zdroj; od tarifu Lite výš snižte úroveň detailu.
Rohy se zaoblily, i když mají být ostré
Vyhlazení je nastavené příliš vysoko. Od tarifu Lite výš jej snižte – skutečné rohy zůstávají ostré až do stupně Strong a teprve Maximum zaobluje všechno.
Ikona má slabý obrys v jiné barvě
To je antialiasovaný lem originálu, natrasovaný jako vlastní tenký tvar. Smažte jej v editoru a příště nejdřív zploštěte zdroj na jednu barvu s ostrými hranami.

Často kladené otázky

Jakou velikost má mít zdrojová ikona?
Tak velkou, jaká existuje – 512 pixelů a více je pohodlné. Pod zhruba 64 pixely je antialiasing velkou částí obrazu a modul nedokáže rozlišit měkkou hranu od skutečné, což vytváří hrbolaté křivky.
Lze převést celou sadu ikon najednou?
Dávková konverze začíná od tarifu Pro, který zpracuje 30 souborů najednou; Studio 50 a Agency 100. Převod sady v jedné dávce má význam i jiný než rychlost – každý soubor prochází identickým nastavením, takže ikony vycházejí vzájemně konzistentní.
Přežije průhlednost?
Ano, ze zdroje, který ji má. Průhledné oblasti PNG nebo WebP zůstanou v SVG prázdné. JPEG nemá průhlednost vůbec, takže ikona z JPEG dorazí s pozadím jako plným tvarem, který lze smazat.
Mají být ikony SVG nebo font?
SVG. Ikonové fonty byly obejítím pro éru prohlížečů, která skončila: neumí více barev, rozbijí se s chybějícím souborem fontu a čtečky obrazovky je čtou jako text. Převeďte na SVG a použijte inline nebo jako sprite.

Související návody

Cookies

Pomocí cookies Google Analytics zjišťujeme, které stránky se navštěvují a kde se návštěvníci zasekávají — žádná reklama, žádné profilování, nic se neprodává. Odmítnete-li, web funguje úplně stejně. Podrobnosti v Zásadách ochrany osobních údajů.