PNG to SVG Converter (Image Vectorizer)

Trace a PNG or JPG logo into an SVG with live detail and smoothing sliders and a side-by-side preview. Runs in your browser, no upload, no account.

🌐 Español

PNG to SVG Converter (Image Vectorizer) works entirely in your browser — upload a PNG or JPG logo, icon or line drawing above to trace it into scalable SVG paths, in color or black-and-white, with a live preview before you download.

🔒 Private by design: everything runs locally in your browser and never uploaded to any server.

Written and maintained by Last updated

What a tracer can and cannot give you back

Vectorizing is not decompression. A PNG holds a grid of coloured squares and nothing else, so a tracer has to look at that grid, decide where one region ends and another begins, and invent smooth outlines that follow those boundaries. The output is a new drawing that resembles the input, not a recovered original.

That distinction decides whether this tool will help you. A two-colour logo, a screenshot of an icon, a scanned line drawing, a shape you need to cut on a vinyl plotter: all of these have hard boundaries between flat regions, and tracing them produces something genuinely usable at any size. A photograph of a face does not. It has no boundaries, only gradients, and the tracer will hand you a few hundred blobby paths that look like a badly printed poster.

Everything runs inside the page, including the tracing library itself, which is fetched only when you actually pick a file rather than on page load.

Tracing a logo and downloading it

  1. Click Upload a PNG or JPG to vectorize and pick your file. The picker offers PNG and JPEG only.
  2. Wait for the decode, then set Mode to Color or Black & white.
  3. Drag Detail anywhere from 1 to 10. It starts at 5, and the current value is shown beside the label.
  4. Drag Smoothing from 0 to 10. It starts at 4.
  5. Watch the right-hand Vector preview panel update against the Original panel on the left. Retracing waits a quarter of a second after you stop dragging, so a slider drag does not queue a dozen traces.
  6. Click Download SVG. The button reads Tracing full quality… while the higher-resolution retrace runs.
  7. If the browser does not start the download automatically, use the fallback link that appears next to the before and after byte sizes.
  8. Reset clears everything so you can start on the next file.

I keep the two panels side by side and change one slider at a time. Detail and smoothing interact, and moving both at once makes it very hard to tell which one caused the improvement.

Detail is three knobs wearing one label

Behind that single slider sit three separate tracer settings, all moved together.

The first is the minimum path length that survives at all. At detail 1 anything shorter than twenty pixels is discarded outright, which strips away speckle and leaves only major shapes. At detail 10 that floor drops to one, so almost nothing is thrown away, including the noise.

The second is curve fitting tolerance. It runs from 1.5 at the low end, where the tracer is happy to approximate an edge with a straighter line, down to 0.1 at the top, where it follows the pixel boundary closely. Tight fitting means more path data.

The third only applies in colour mode: the palette size, which climbs from two colours at detail 1 to sixty-four at detail 10, passing through thirty at the default of 5. This is why a low detail setting produces that flat, posterized look rather than merely a simpler one.

Smoothing is what you reach for when a photo explodes

Smoothing blurs a working copy of the image before tracing and, from step six upward, also switches on the tracer’s own line filtering pass.

The numbers are modest and deliberate. At zero there is no blur. At the default of 4 the blur radius is two pixels. At the maximum of 10 it reaches five pixels with a wider colour tolerance. That is enough to fuse JPEG compression artifacts and camera noise into flat regions, and not enough to soften a genuine corner into a curve.

If a trace comes back with a thousand tiny paths, raise smoothing before you lower detail. Lowering detail throws away real shapes along with the noise; smoothing removes the noise first so the real shapes survive.

After the trace

The downloaded SVG is honest but not tidy. Tracers emit a lot of redundant coordinate precision, and running the result through SVG Optimizer usually removes a meaningful chunk of it without changing how the file looks.

To go back the other way, or to produce a raster at a specific pixel size from the vector you just made, SVG to PNG handles it. For a traced silhouette destined to become a site icon at several sizes, Favicon Generator is the next step, and Sticker Maker adds an outline around a cut-out shape. Everything else is on the image tools hub.

See it in action

Screenshot of the PNG to SVG Converter (Image Vectorizer) tool with an empty dropzone waiting for a PNG or JPG to vectorize
PNG to SVG Converter (Image Vectorizer) mid-process: an empty dropzone waiting for a PNG or JPG to vectorize.
Screenshot of the PNG to SVG Converter (Image Vectorizer) result screen showing the raster image traced into vector paths, previewed as SVG beside the tracing controls
The finished result: the raster image traced into vector paths, previewed as SVG beside the tracing controls. The download link is a local blob URL — the file never leaves your device.

Frequently asked questions

Does tracing recover the original vector file?

No, and nothing can. If a logo started life as a vector and was exported to PNG, the curves were thrown away at that moment. Tracing looks at the pixels and draws new shapes that approximate what it sees. On flat, high-contrast artwork the result can be very close. It will never be the designer's original file, so if that file exists anywhere, use it instead.

What is the difference between the preview and the downloaded file?

Resolution. The live preview is traced from a copy of your image shrunk to 260 pixels on its longest side, which is what keeps the sliders responsive while you drag them. Pressing download re-traces from the original file at up to 1400 pixels on the longest side, so the file you get is cleaner and more faithful than the preview suggested.

Why cap the export at 1400 pixels?

Because contour tracing is expensive and runs on the page's main thread, with no background worker available. Tracing a full twelve megapixel photograph at high detail would lock the tab for a long time and produce an enormous SVG full of paths nobody wants. The cap covers the real use case, which is logos, icons and line art. Images already smaller than the cap are traced at their native size.

What does the detail slider actually control?

Three things at once. It sets the shortest path length that survives, from twenty pixels at the lowest setting down to one at the highest, so low detail sweeps away small shapes. It sets how tightly curves are fitted to edges, from a loose tolerance of 1.5 down to a tight 0.1. And in colour mode it sets the palette size, from two colours at the bottom of the range to sixty-four at the top.

And smoothing?

Blur applied before tracing, plus a noise filter. At zero there is no blur at all. At the top of the range the blur radius reaches five pixels with a wider tolerance, and from the sixth step upward the tracer's own line filter switches on as well. Raise it when a photograph is producing hundreds of tiny stray paths, and leave it low for clean artwork that already has hard edges.

How does black and white mode differ from setting detail to its lowest?

Lowest detail gives you two colours, but the tracer picks which two by sampling your image, so a blue logo can come back as two shades of blue. Black and white mode instead forces an explicit two-entry palette of pure black and pure white. If you want a genuine one-colour silhouette for a cutting machine or a stencil, that is the setting to use.

What is the comment at the top of the SVG file?

A one-line note recording the original file size in bytes, the traced size in bytes, and the percentage difference. An XML comment before the root element is valid markup and has no effect on rendering, so it rides along harmlessly. Delete it if you would rather not ship it, or leave it as a record of what the trace cost you.

Related tools