Image to SVG Tracer

Paano i-convert ang larawan sa SVG

1. I-drop ang isang PNG, JPG, WebP o GIF na larawan sa drop zone, o i-click ito para pumili. Lalabas sa kaliwa ang orihinal.
2. Pumili ng Preset: - Logo (flat na kulay, malinis na hugis) para sa mga logo, icon, selyo at flat na ilustrasyon; - Detalyado (mas maraming kulay at path) para sa mga drawing na may shading o maraming kulay; - Posterized (4 na pinakinis na kulay) para sa istilong poster mula sa isang litrato.
3. Ayusin ang Bilang ng mga kulay (2 hanggang 64) at Huwag pansinin ang mga batik na mas maliit sa (px) kung kailangan. Pinupunan ng preset ang makatwirang halaga para sa dalawa.
4. Pumili ng Laki ng pagtatrabaho (pinakamahabang gilid). Tina-trace ang larawan sa laking iyon; pinapanatili ng mismong SVG ang orihinal na dimensyon.
5. I-click ang I-trace sa SVG. Lalabas sa kanan ang resulta kasama ang laki ng file, bilang ng mga path at kulay, at kung gaano katagal ang pag-trace.
6. I-click ang I-download ang SVG, o Kopyahin ang SVG code para i-paste ang markup sa iyong HTML o design tool.

Paano gumagana ang pag-trace

Gumagamit ang tool na ito ng imagetracerjs, isang open-source na tracer, sa tatlong hakbang:

1. Color quantization: binabawasan ang larawan sa bilang ng kulay na pinili mo. Itinatalaga ang bawat pixel sa pinakamalapit na kulay ng palette, at pinipino ang palette sa ilang pass.
2. Edge detection: para sa bawat kulay, sinusundan ang mga balangkas ng bawat bahaging may ganoong kulay, kasama ang mga butas (gaya ng loob ng “O”).
3. Path fitting: pinapasimple ang mga balangkas bilang tuwid na linya at quadratic curve, na nagiging mga <path> element sa SVG.

Tinatanggal ang mga bahaging mas maliit sa limitasyong Huwag pansinin ang mga batik na mas maliit sa (px), na nag-aalis ng ingay at JPG artifact. Pinapanatili ng halagang 0 ang lahat; maganda ang 8 hanggang 20 para sa mga logo; ang mas malalaking halaga ay nagbibigay ng mas malinis pero mas simpleng drawing. Inaalis ang mga ganap na transparent na bahagi, kaya nananatiling transparent ang logo na nasa transparent na background.

Ano ang nagbibigay ng magandang resulta

Pinakamahusay ang pag-trace sa mga simpleng logo at drawing: kaunting flat na kulay, malinaw na gilid, walang gradient. Ang na-scan na sketch, ang itim-at-puting pirma o ang pixel-art na icon ay napakahusay ma-trace gamit ang 2 hanggang 8 kulay.

Iba ang kaso ng mga litrato. Libu-libong banayad na kulay ang laman ng isang litrato, kaya ang tapat na vector na bersyon nito ay nangangailangan ng maraming kulay at sampu-sampung libong path, at mas mabigat ang SVG kaysa sa JPG. Gamitin ang Posterized (4 na pinakinis na kulay) para sa artistikong epekto, at huwag umasa ng resultang parang litrato. Kapag naging napakalaki ng SVG, bibigyan ka ng babala ng tool.

Mga tip para sa mas malinis na logo:

• magsimula sa pinakamalaki at pinakamalinaw na bersyon ng larawan na mayroon ka;
• itakda ang Bilang ng mga kulay sa tunay na bilang ng kulay sa logo (kasama ang background);
• itaas ang limitasyon sa batik kung may nakikita kang maliliit na tuldok sa paligid ng mga gilid.

Privacy at kaligtasan ng preview

Tina-trace sa iyong browser ang larawan at hindi ito kailanman ina-upload. Ipinapakita ang SVG preview bilang karaniwang larawan mula sa pribadong blob address, hindi kailanman isiningit sa page, kaya kahit kakaibang file ay hindi makakapagpatakbo ng code.