Paano I-convert ang JPG to SVG o PNG to SVG

Para i-convert ang JPG to SVG (o PNG to SVG), tine-trace mo ang image. Hinahanap ng software ang mga gilid sa pagitan ng mga kulay at muling iginuguhit ang mga ito bilang vector shapes. Ginagawa ito ng browser tracer sa isang hakbang, at ng libreng Inkscape editor gamit ang Path > Trace Bitmap. Maayos ang tracing para sa logos, icons at line art, at hindi maganda para sa photos.

Ano ang nangyayari kapag kinonvert mo ang image to SVG

Magkaibang-magkaiba ang paraan ng pag-store ng larawan ng JPG, PNG at SVG. Grid ng may kulay na pixels ang JPG o PNG. Inilalarawan ng SVG ang mga hugis gamit ang text: "isang curve mula rito hanggang doon, puno ng dark blue." Walang direktang pagsasalin sa pagitan ng dalawa, kaya kailangang alamin ng converter kung nasaan ang mga hugis.

Tracing o vectorizing ang tawag sa prosesong iyan. Pinagsasama-sama ng software ang magkakatulad na kulay, sinusundan ang outline ng bawat grupo, at pinapakinis ang outlines para maging curves. Ang resulta ay pagtantya ng image mo na binuo mula sa paths. Kapag kaunti at flat ang kulay at malinaw ang gilid, puwede itong magmukhang halos kapareho ng orihinal at mapalaki sa kahit anong size. Kapag may gradients, texture at pinong detalye, kailangang pasimplehin nang husto ng software.

Mag-ingat sa mga converter na lumalaktaw sa tracing. May mga tool na binabalot lang ang JPG o PNG sa loob ng SVG file at tapos na. Nagtatapos sa .svg ang file, pero parehong pixels pa rin ang laman nito at lumalabo kapag pinalaki. Kung tinatanggihan ng cutting machine, embroidery program o laser engraver ang "SVG" mo, malamang ito ang dahilan. Para i-check, buksan ang file sa text editor. Kung may makita kang mahabang bloke na nagsisimula sa data:image/png;base64 o data:image/jpeg;base64 at kaunti lang ang path na elements, hindi ito kailanman na-trace.

Aling images ang maayos ma-convert to SVG (at alin ang hindi)

Magagandang kandidato:

• Mga logo na may ilang flat na kulay.
• Mga icon at simpleng ilustrasyon.
• Black and white na line art, stamps at clip art.
• Mga signature at sulat-kamay na na-scan sa disenteng size.
• Text sa makapal at malinis na typeface.

Hindi magagandang kandidato:

• Mga photo ng tao, lugar o produkto.
• Mga image na may malalambot na anino, gradient o blur.
• Maliliit at mababang-resolution na file na malabo na ang mga gilid.
• Mga JPG na sobrang compressed at may kitang artifacts sa paligid ng mga gilid.

Ang photo na na-trace sa SVG ay mukhang poster na gawa sa flat na patches ng kulay. Puwedeng mas lumaki pa ang file kaysa sa orihinal, dahil libu-libong maliliit na hugis ang laman nito. Para sa photos, manatili sa raster format gaya ng JPG o WebP.

JPG o PNG: alin ang mas magandang source?

PNG, kung may pagpipilian ka. Nag-iiwan ang JPG compression ng mahinang mantsa at alon sa paligid ng matatalas na gilid, at ginagawa iyon ng tracer na bukol at ligaw na tuldok. Malinis ang gilid ng PNG ng parehong logo at madalas transparent ang background, kaya mas maganda ang trace. Kung JPG lang ang mayroon ka, gamitin ang pinakamalaking bersyong mahahanap mo at linisin muna ito (tips sa ibaba). Ipinapaliwanag ng gabay namin sa PNG files kung bakit buo ang gilid sa format na ito.

Paano i-convert ang PNG to SVG sa browser mo

Tine-trace ng PNG to SVG tool ang PNG at JPG images gamit ang open-source na ImageTracer library. Buong tumatakbo ito sa browser mo, kaya hindi naa-upload kahit saan ang logo na ginagawa mo.

1. Buksan ang tool at idagdag ang PNG o JPG mo.
2. Patakbuhin ang trace at tingnan ang preview.
3. Kung mukhang tulis-tulis ang gilid o sobrang dami ng ligaw na tuldok, maghanda ng mas malinis o mas malaking source image at mag-trace ulit.
4. I-download ang SVG.
5. Buksan ang SVG sa browser at mag-zoom in para suriin ang mga kurba bago gamitin.

Tingnan din ang file size. Kadalasang maliit na SVG ang nagagawa ng malinis na logo. Kung mas malaki nang husto ang download kaysa sa source image, maraming maliliit na hugis ang nakita ng tracer, senyales na masyadong magulo o detalyado ang source.

Ito ang pinakamabilis na paraan para sa malinis na logo o icon. Para sa kumplikadong design, asahang kakailanganin mong ayusin ang resulta sa vector editor.

Isipin kung saan gagamitin ang SVG bago ka magpasya sa resulta. Ang logo para sa website ay kailangan lang magmukhang tama sa screen, kaya bihirang mahalaga ang maliliit na kapintasan. Eksaktong sinusundan ng cutting machines at vinyl plotters ang bawat path, kaya nagiging maliliit na hiwa ang ligaw na tuldok at dapat itong i-delete. Para sa print, tiyaking eksaktong shade na inaasahan mo ang na-trace na kulay, dahil pinagsasama-sama ng tracers ang magkakalapit na kulay.

Paano i-convert ang JPG to SVG sa Inkscape

Ang Inkscape ay libre at open-source na vector editor para sa Windows, Mac at Linux. Mas maraming kontrol ang ibinibigay ng tracing nito. Nagbababala mismo ang manual nito na huwag umasa ng perpektong kopya ng larawan, na makatarungang buod ng tracing sa pangkalahatan.

1. Buksan ang Inkscape at i-import ang JPG o PNG (File > Import, o i-drag ito sa canvas).
2. Piliin ang image.
3. Piliin ang Path > Trace Bitmap, o pindutin ang Shift+Alt+B.
4. Pumili ng mode. Ang Brightness cutoff ay gumagawa ng single-color na silhouette, na bagay sa mga itim na logo at signature. Ang Centerline tracing ay ginagawang iisang linya ang manipis na guhit, na bagay sa sulat-kamay. Ang Multiple scans ay nagta-trace ng ilang kulay bilang hiwalay na layer.
5. I-click ang Apply. Ilalagay ang mga na-trace na path sa ibabaw ng orihinal na image.
6. I-drag sa gilid ang resulta para ihambing, tapos burahin ang orihinal na bitmap.
7. I-save gamit ang File > Save As at pumili ng SVG format.

Ang Multiple scans ay nagbibigay ng mas maraming detalye ng kulay pero gumagawa ng maraming nagpapatong-patong na object na kailangang linisin. Magsimula sa mas kaunting kulay at dagdagan lang kung kailangan.

Paano makakuha ng mas malinis na trace

Karamihan ng quality ay galing sa input image. Malaki ang naitutulong ng ilang minutong paghahanda.

• Magsimula sa pinakamalaki at pinakamatalas na bersyong mahahanap mo. Mas maraming pixel sa bawat gilid, mas makinis ang kurba.
• I-crop palayo ang lahat maliban sa logo gamit ang crop tool, para hindi maging hugis ang mga ligaw na marka.
• Alisin o gawing flat ang background. Mas mahusay mag-trace ang simpleng puti o transparent na background kaysa sa may texture.
• Bawasan ang mga kulay. Para sa one-color na logo, nakakatulong sa tracer na makahanap ng malinis na gilid kung gagawin muna itong black and white gamit ang grayscale tool at lalakasan ang contrast.
• Iwasan ang napakaliit na source. Masyadong kaunti ang edge information ng logo na 100 pixel ang lapad, at magmumukhang bukol-bukol ang curves sa kahit anong size.

Pagkatapos mag-trace, mag-zoom in sa mga sulok at maliliit na text. Madalas binibilugan ng tracers ang matatalas na sulok at pinagdidikit ang mga letrang magkakalapit. Kung mangyari iyon, subukan ang mas malaking source o ayusin nang mano-mano ang mga bahaging iyon.

Kailan dapat i-redraw sa halip na i-trace

Kung mahalaga ang logo, gaya ng brand ng kumpanya na ilalagay sa signs o t-shirts, panimula lang ang trace. Puwede itong iguhit muli ng designer sa vector editor, gamit ang trace bilang gabay, at gumawa ng malinis at minimal na paths na eksakto ang kulay.

Bago ang lahat ng iyan, hingin sa gumawa ng logo ang orihinal na vector file. Laging mas maganda ang AI, EPS, PDF o SVG mula sa designer kaysa sa trace. At kung kailangan mo lang ng malinaw na image sa iisang partikular na size, baka sapat na ang high-resolution na PNG nang walang anumang conversion.

Mas simple ang kabaligtarang direksyon, dahil puwedeng i-render ang SVG sa kahit anong pixel size. Saklaw iyon ng gabay sa pagbukas ng SVG files at pag-save sa mga ito bilang PNG o JPG.

Mga madalas itanong