Vektorizácia obrázka na SVG

Ako konvertovať obrázok na SVG

1. Presuň obrázok PNG, JPG, WebP alebo GIF do vyznačenej oblasti alebo na ňu klikni a vyber ho. Originál sa zobrazí vľavo.
2. Vyber Predvoľbu: - Logo (plné farby, čisté tvary) pre loga, ikony, pečiatky a ploché ilustrácie; - Podrobná (viac farieb a ciest) pre kresby s tieňovaním alebo mnohými farbami; - Posterizovaná (4 vyhladené farby) pre štylizovaný výsledok z fotografie, podobný plagátu.
3. V prípade potreby uprav Počet farieb (2 až 64) a Ignorovať škvrny menšie ako (px). Predvoľba nastaví rozumné hodnoty pre obe polia.
4. Vyber Pracovnú veľkosť (dlhšia strana). Obrázok sa vektorizuje v tejto veľkosti; samotné SVG si zachová pôvodné rozmery.
5. Klikni na Vektorizovať na SVG. Vpravo sa zobrazí výsledok s veľkosťou súboru, počtom ciest a farieb a časom vektorizácie.
6. Klikni na Stiahnuť SVG, alebo na Kopírovať kód SVG, ak chceš značky vložiť do HTML alebo dizajnérskeho nástroja.

Ako vektorizácia funguje

Tento nástroj používa imagetracerjs, open source vektorizátor, v troch krokoch:

1. Kvantizácia farieb: obrázok sa zredukuje na zvolený počet farieb. Každý pixel sa priradí k najbližšej farbe palety a paleta sa upresňuje v niekoľkých prechodoch.
2. Detekcia hrán: pre každú farbu sa sledujú obrysy všetkých oblastí tejto farby vrátane dier (napríklad vnútra písmena „O“).
3. Preloženie ciest: obrysy sa zjednodušia na priame čiary a kvadratické krivky, z ktorých vzniknú prvky <path> v SVG.

Oblasti menšie ako prah Ignorovať škvrny menšie ako (px) sa vynechajú, čo odstraňuje šum a artefakty JPG. Hodnota 0 zachová všetko; 8 až 20 je vhodné pre loga; vyššie hodnoty dávajú čistejšiu, ale jednoduchšiu kresbu. Úplne priehľadné oblasti sa odstránia, takže logo na priehľadnom pozadí zostane priehľadné.

Čo dáva dobré výsledky

Vektorizácia funguje najlepšie pri jednoduchých logách a kresbách: málo plných farieb, jasné hrany, žiadne farebné prechody. Naskenovaný náčrt, čiernobiely podpis alebo ikona v štýle pixel artu sa vektorizujú veľmi dobre s 2 až 8 farbami.

S fotografiami je to iné. Fotografia obsahuje tisíce jemných odtieňov, takže verná vektorová verzia potrebuje veľa farieb a desaťtisíce ciest a SVG je potom oveľa ťažšie ako JPG. Na umelecký efekt radšej použi Posterizovanú (4 vyhladené farby) a nečakaj fotografický výsledok. Ak sa SVG veľmi zväčší, nástroj ťa upozorní.

Tipy na čistejšie logo:

• začni od najväčšej a najostrejšej verzie obrázka, akú máš;
• nastav Počet farieb na skutočný počet farieb v logu (vrátane pozadia);
• ak vidíš okolo hrán malé bodky, zvýš prah pre škvrny.

Súkromie a bezpečnosť náhľadu

Obrázok sa vektorizuje v tvojom prehliadači a nikdy sa nenahráva. Náhľad SVG sa zobrazuje ako obyčajný obrázok zo súkromnej adresy blob a nikdy sa nevkladá do stránky, takže ani nezvyčajný súbor nemôže spustiť kód.