SVGSketch Learn

How to Convert PNG to SVG

Trace a PNG into editable SVG paths, then clean and simplify the result instead of shipping the raw vectorizer output.

Open SVGSketch

Quick answer

Open SVGSketch, drag your .png onto the canvas, select the image and click "Vectorize..." in the Image panel, pick Color or Monochrome mode and a quality preset, and the PNG becomes editable SVG paths you can refine and export. A live SSIM/PSNR quality readout shows how faithful the trace is.

Steps at a glance

  1. Drop the PNG on canvas

    Drag the .png onto SVGSketch.

  2. Run vectorize

    Select the image, click "Vectorize..." in the Image panel, and pick Color or Monochrome mode.

  3. Simplify the path

    Use Shape > Simplify Path (Ctrl+Shift+{) to drop anchor count.

  4. Clean colors

    Snap traced fills to exact values on the Appearance panel.

  5. Review the replacement

    The traced paths replace the PNG automatically; undo to re-trace with other settings.

  6. Export SVG

    Export SVG with "Optimize with SVGO" enabled.

Step 1: Drop the PNG onto the canvas

Drag the .png onto app.svgsketch.com. The image becomes a placed bitmap (an SVG <image> element), which is a fine starting point but is not yet vector geometry.

Step 2: Run vectorize

With the image selected, open the Image panel and click "Vectorize...". For high-contrast logos and icons, switch Mode to Monochrome and tune the B&W Threshold. For colored artwork, stay in Color mode and use Color Precision and the Color Limit (8 to 512 colors) to control how many fills the trace produces.

Pick an Output Style: Smooth Curves for logos and illustrations, Straight Lines for hard-edged diagrams, Pixel Edges or Lossless (Bit-Exact) for pixel art. The side-by-side preview and the SSIM/PSNR/ΔE quality strip show exactly how close the trace is before you commit. More detail produces more nodes, which means a heavier file.

Step 3: Simplify the traced paths

Vectorizer output is often over-noded. Select a traced path, switch to the Edit tool (E), and run Shape > Simplify Path (Ctrl+Shift+{) until anchor count drops with no visible loss in shape - the tolerance is adjustable from the Simplify Options caret in the edit toolbar. Raising Filter Speckle in the vectorize dialog before converting also removes noise fragments at the source.

Step 4: Clean colors

Vectorize produces filled regions. Adjust fill colors on the Appearance panel - tracing picks averaged colors that often need snapping to exact brand values. With "Recognize shapes" enabled, circles and rectangles in the source import as first-class editable shapes instead of paths.

Step 5: Review the replacement

When you click Convert, the traced paths replace the placed PNG at its exact position and size - the original bitmap is removed in the same undoable step, so the document is pure vector immediately. Press Ctrl+Z if you want to go back and re-trace with different settings.

Step 6: Export the SVG

In the Export panel, choose SVG and enable "Optimize with SVGO". The result is a small, clean .svg you can scale infinitely and version-control. Keep the original PNG for reference but ship the SVG.

FAQ

Will the SVG be a perfect copy of the PNG?

No. Vectorization is approximation - it traces the bitmap. For logos and high-contrast icons the result is usually clean enough to ship; for detailed photos it is rarely worth shipping the vectorized output.

How do I get cleaner traced paths?

Raise Filter Speckle in the vectorize dialog, then run Shape > Simplify Path (Ctrl+Shift+{) until you have the lowest anchor count that still preserves the shape. Vectorizer output often carries more nodes than necessary.

Can I vectorize a photograph?

You can - the Photo quality preset exists for it - but the result is large and rarely useful for editing. Vectorization works best on flat-color graphics; for photos, keep the raster.

Does the converted SVG keep the original PNG embedded?

No. The traced paths replace the placed bitmap automatically as part of the conversion, so the exported .svg is pure vector.

Is the conversion done locally?

Yes. Vectorization runs in the browser. Your PNG is not uploaded.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch