Skip to main content

← Back to blog

How to Convert PNG to SVG (and When You Shouldn't)

A PNG is made of pixels, so it blurs when you enlarge it. An SVG is made of mathematical paths, so it stays razor-sharp at any size. Converting PNG to SVG — called vectorizing or tracing — is a fantastic trick for logos and icons, but a bad idea for photos. Here is how to tell the difference.

We measured this ourselves. Tracing only pays off when the picture is already made of flat shapes. Our transparent logo went from 28.8 KB to 1.7 KB, a 94% saving, and became infinitely scalable. The photograph went the other way entirely: 1.88 MB of PNG turned into 7.74 MB of SVG paths, four times the original. see the full measurements

Raster vs vector, in one line

  • Raster (PNG, JPG, WebP): a grid of colored pixels. Great for photos; gets blocky when scaled up.
  • Vector (SVG): shapes described by math. Scales infinitely, usually a tiny file, ideal for logos and print.

What “tracing” actually does

A converter cannot magically know the shapes in your image. It approximates: it groups areas of similar color and redraws them as vector paths. That means the result is a clean interpretation of the original, not a pixel-perfect copy. Fewer colors and sharper edges trace better; smooth gradients and fine detail trace worse.

When PNG to SVG works beautifully

  • Logos and icons with flat colors and clear edges
  • Line art and simple illustrations
  • Black-and-white marks you want crisp on any screen or in print

For these, PNG to SVG produces a small, scalable file you can drop into a website or a large banner with zero blur.

The measured case for tracing is narrow but decisive. Our transparent logo went 28.8 KB → 1.7 KB (-94%) and became infinitely scalable — the single biggest win anywhere in our data. That is what “few colours, hard edges” buys you.

When to keep the raster file

  • Photographs — tracing a photo produces thousands of messy paths, a larger file, and a poor result.
  • Complex gradients or textures — the same problem.

For photos, stick with a raster format and control size with the image compressor instead.

And the measured case against it is just as clear. The same tool turned a flat illustration into 34.7 KB → 117.0 KB (+238%), a UI screenshot into 18.0 KB → 27.3 KB (+52%), and a photograph into 1.88 MB → 7.74 MB (+312%). Tracing a JPG photo was worse still, 330.2 KB → 7.49 MB (+2224%). Every region of colour becomes a path, and a photograph has tens of thousands of them.

How to convert, privately

These tools trace entirely in your browser — your image is never uploaded:

Pick a detail level, preview the result, and download. If the traced version looks clean, you have a logo that will never pixelate again; if it looks noisy, that image simply belongs in PNG.

A quick decision guide

Your imageTrace to SVG?Why
Flat logo, 2–4 colorsYesClean edges, tiny file
Icon or line artYesPaths stay crisp at any size
Screenshot with textUsually noAnti-aliased edges become messy paths
PhotographNoThousands of paths, larger file, worse look
Gradient or textured artNoSmooth tones don’t reduce to solid shapes

A concrete example

Picture a black-and-white club logo saved as a 512 px PNG. Blow it up on a poster and the edges crumble into a staircase of pixels. Trace it to SVG and the same mark prints razor-sharp at any size, often in under 10 KB. Now try the same on a family photo: the tracer has no single shape to follow, so it carves the picture into thousands of colored blobs. The file balloons, and skin and sky end up looking like a paint-by-numbers poster. Same tool, opposite outcome — because one image is built from shapes and the other from continuous tone.

Here is what tracing actually produced on two very different inputs:

Test imageInputOutputChange
Logo with alpha28.8 KB1.7 KB-94%
Screenshot18.0 KB27.3 KB+52%

The flat logo traced to 1.7 KB (-94%) — a real win, because a handful of shapes describes it completely. The screenshot went 18.0 KB → 27.3 KB (+52%): the tracer had to emit a path for every region of similar colour, and a screenshot full of text has thousands of them. That gap is the decision rule. If tracing makes the file bigger, the image was never vector material to begin with.

Common misconceptions

  • “SVG is always smaller.” Only for simple art. A traced photo is usually bigger than the original PNG.
  • “Tracing recovers lost detail.” It can’t. It reinterprets what is already there; it never adds resolution.
  • “Any PNG can become a clean logo.” If the source is blurry or noisy, the trace inherits that mess.

FAQ

Can I edit the SVG afterwards?

Yes. Because an SVG is made of paths, you can open it in a vector editor and recolor or reshape individual parts — something a flat PNG won’t allow.

Why does my traced file look posterized?

The tracer reduced your image to a handful of solid colors. Raise the color or detail level, or accept that the image is photographic and keep it as a raster.

What about the opposite direction?

Going from a vector back to pixels is straightforward and stays sharp at your chosen size — see SVG to PNG.