Vektorizace obrázku do SVG

Jak převést obrázek na SVG

1. Přetáhni obrázek PNG, JPG, WebP nebo GIF do vyznačené oblasti, nebo na ni klikni a vyber ho. Originál se zobrazí vlevo.
2. Vyber Předvolbu: - Logo (plné barvy, čisté tvary) pro loga, ikony, razítka a ploché ilustrace; - Podrobná (více barev a křivek) pro kresby se stínováním nebo mnoha barvami; - Posterizace (4 vyhlazené barvy) pro stylizovaný výsledek podobný plakátu z fotky.
3. V případě potřeby uprav Počet barev (2 až 64) a Ignorovat skvrny menší než (px). Předvolba k oběma polím doplní rozumné hodnoty.
4. Zvol Pracovní velikost (delší strana). Obrázek se vektorizuje v této velikosti; samotné SVG si ponechá původní rozměry.
5. Klikni na Vektorizovat do SVG. Vpravo se objeví výsledek s velikostí souboru, počtem křivek a barev a dobou vektorizace.
6. Klikni na Stáhnout SVG, nebo na Kopírovat kód SVG a vlož značky do HTML či návrhářského nástroje.

Jak vektorizace funguje

Nástroj používá imagetracerjs, open-source vektorizér, ve třech krocích:

1. Kvantizace barev: obrázek se zredukuje na zvolený počet barev. Každý pixel se přiřadí nejbližší barvě palety a paleta se několika průchody zpřesňuje.
2. Detekce hran: pro každou barvu se sledují obrysy všech oblastí této barvy včetně otvorů (například vnitřku písmene „O“).
3. Proložení křivek: obrysy se zjednoduší na přímky a kvadratické křivky, které se v SVG stanou prvky <path>.

Oblasti menší než práh Ignorovat skvrny menší než (px) se zahodí, čímž zmizí šum a artefakty JPG. Hodnota 0 ponechá všechno; 8 až 20 je vhodné pro loga; vyšší hodnoty dají čistší, ale jednodušší kresbu. Plně průhledné oblasti se odstraní, takže logo na průhledném pozadí zůstane průhledné.

Co dává dobré výsledky

Vektorizace funguje nejlépe u jednoduchých log a kreseb: málo plných barev, ostré hrany, žádné přechody. Naskenovaná skica, černobílý podpis nebo ikona z pixel artu se vektorizují velmi dobře se 2 až 8 barvami.

U fotek je to jiné. Fotka obsahuje tisíce jemných odstínů, takže věrná vektorová verze potřebuje mnoho barev a desítky tisíc křivek a SVG je nakonec mnohem těžší než JPG. Pro umělecký efekt raději použij Posterizace (4 vyhlazené barvy) a nečekej fotografický výsledek. Pokud je SVG velmi velké, nástroj tě upozorní.

Tipy pro čistší logo:

• vyjdi z největší a nejostřejší verze obrázku, kterou máš;
• Počet barev nastav na skutečný počet barev v logu (včetně pozadí);
• pokud vidíš kolem hran malé tečky, zvyš práh pro skvrny.

Soukromí a bezpečnost náhledu

Obrázek se vektorizuje ve tvém prohlížeči a nikdy se nenahrává. Náhled SVG se zobrazuje jako obyčejný obrázek z privátní adresy blob a nikdy se nevkládá přímo do stránky, takže ani neobvyklý soubor nemůže spustit kód.