How to Convert PNG to SVG Online Free

Convert PNG images to SVG vector graphics online free. Learn when vectorization works well, what limitations to expect, and how to get the cleanest results.

Trace a PNG into an SVG vector in your browser. Best for simple logos and icons, not photos. No upload, no sign-up.

How to Convert PNG to SVG Online Free

Turn raster PNG images into scalable SVG vector graphics for logos, icons, and crisp scaling at any size.

Last updated:

ConvertPNG to SVG
MethodTracing, not a true conversion
Best forFlat logos and icons
Avoid onPhotos and detailed art

A PNG is a raster image: a grid of colored pixels. An SVG is a vector image: a set of mathematical shapes, lines, and fills that stay razor sharp at any size. These are fundamentally different ways of describing a picture, so turning a PNG into an SVG is not like changing JPG to WebP. There is no exact conversion. The tool has to look at the pixels and redraw them as shapes, a process called tracing.

That distinction matters for your expectations. Tracing a clean, flat graphic can give you a genuinely useful, scalable SVG. Tracing a photograph gives you a bloated, blotchy mess that is worse than the original in every way.

Raster to vector is not a normal conversion

When you trace a PNG, the tool groups nearby pixels of similar color into regions and draws a vector outline around each one. A red circle in the PNG becomes an actual circular path filled with red. Because the result is made of shapes and not pixels, it can scale to any size without blurring, which is the whole point of using SVG for logos and icons.

The catch is that a photograph has thousands of subtly different colors and no clean regions, so tracing it produces thousands of tiny overlapping shapes. The SVG ends up larger than the PNG, slow to render, and still looks like a smeared approximation. Vector is the wrong container for photographic content.

It helps to see why the two directions are not symmetric. Turning a vector into a raster is exact and mechanical: the renderer evaluates the shapes and samples them onto a pixel grid at whatever resolution you ask, which is why SVG to PNG always works. Going the other way is a reconstruction problem with no single right answer, because a grid of pixels does not record where one shape ends and another begins. The tracer has to infer that boundary, and any inference can be wrong. That is the deep reason PNG to SVG is described as tracing rather than conversion: the tool is making an educated guess about the shapes that might have produced these pixels, not decoding information the file actually contains.

The short version

PNG to SVG means tracing pixels into shapes. It works for simple flat art and fails for photos. It is a redraw, not a lossless conversion.

PNG and SVG: pixels versus shapes

The reason this conversion is so unlike, say, PNG to JPG comes down to how the two formats describe an image at the most basic level. PNG, the Portable Network Graphics format, is a raster format standardized by the W3C and originally defined in RFC 2083.[1] A PNG stores an explicit grid of pixels, each with its own color value, compressed losslessly with the DEFLATE algorithm so that every pixel is recovered exactly on decode.[2] The image is fundamentally a bitmap: the file knows the color at position (x, y) and nothing about what those pixels represent. Enlarge a PNG and there is no more detail to show, so the renderer simply makes each pixel bigger and the result looks blocky or soft.

SVG, Scalable Vector Graphics, works in an entirely different way. It is an XML-based vector format defined by the W3C, and instead of pixels it stores instructions: draw a path along these coordinates, fill this region with that color, stroke this line at that width.[3] Because the picture is described mathematically rather than sampled onto a grid, an SVG can be rendered at any size and stays perfectly crisp, which is why the format is the standard choice for logos, icons, and diagrams that must look sharp from a favicon to a billboard.[4] The gap between the two is not one of quality or compression but of kind: one records what the image looks like, the other records how to draw it. Nothing in a bitmap tells you where a shape begins or ends, so there is no automatic, exact way to turn one into the other. That gap is exactly what tracing tries to bridge, and why it can only ever approximate.

How image tracing actually works

An image tracer, sometimes called a vectorizer, runs a pipeline that guesses shapes from pixels. It begins by reducing the number of colors in the PNG, grouping the image down to a small set of representative colors so that near-identical shades merge into one. This step is what lets a photograph, with its thousands of subtle tones, collapse into a handful of flat regions, and it is also why photographs trace so badly: forcing smooth gradients into a few flat colors destroys exactly the detail that made them photographs.

Next the tracer performs segmentation, walking the now-simplified image and finding connected areas of the same color. Each of these regions becomes a candidate shape. The tracer then follows the boundary of each region pixel by pixel to produce a jagged outline, and finally fits smooth curves to that outline, replacing the staircase of pixel edges with Bezier curves and straight segments that approximate the shape with far fewer points. Those fitted curves are written out as SVG path elements, each filled with its region's color. The quality of the result rides almost entirely on the first and last steps: how aggressively colors were merged, and how tightly the curves were fitted to the traced boundary. Get those right on a flat logo and the output is indistinguishable from a hand-drawn vector; get them wrong, or feed in a photo, and you get a pile of overlapping blobs.

What traces well and what does not

Source imageTraces well?Why
Flat logo, few colorsYesClear regions become clean shapes
Line-art iconYesSimple outlines map to paths
Screenshot with textPartlyEdges soften, small text can break up
Gradient or shadowPoorlySmooth blends become banded shapes
PhotographNoNo clean regions, output is huge and blotchy
Tip

If you still have the original vector file the logo was designed in, use that instead of tracing. Tracing is a rescue when the vector source is lost.

The settings that control a trace

Most tracers expose a few parameters, and understanding them explains why two traces of the same PNG can look wildly different. Each one is a dial on the same trade between faithfulness and cleanliness.

SettingWhat it controlsEffect of turning it up
Number of colorsHow many flat colors the image is reduced toMore detail kept, but more shapes and a larger, busier SVG
Path smoothingHow tightly curves are fitted to traced edgesCleaner curves, but fine corners get rounded off
Detail or thresholdThe smallest region worth turning into a shapeTiny specks are captured, often as noise
Corner sharpnessWhether angles stay crisp or become curvesSharper corners on logos, but noisier on soft art

For a flat, few-color logo the sweet spot is a small color count with generous smoothing, which yields a handful of clean paths. Pushing the color count high to rescue a detailed image almost always backfires: you trade a slightly better-looking trace for an SVG that is larger than the PNG and slow to render, which defeats the purpose of going vector in the first place.

Worth knowing

A traced SVG is not editable the way a hand-drawn one is. It may contain hundreds of anonymous paths with no named layers or logical grouping, so cleaning it up by hand can be harder than redrawing the artwork from scratch.

Convert PNG to SVG, step by step

  1. Open the converter and add your PNG

    Open the FileFormer image converter and drop your PNG in. It runs in your browser, so the file is never uploaded.

  2. Choose SVG as the output

    Select SVG. The tool traces the shapes and colors in your PNG into vector paths.

  3. Inspect the result at different sizes

    Zoom in and out. A good trace stays crisp when enlarged. If edges look ragged or colors are blotchy, the source was too detailed for tracing.

  4. Download the SVG

    Save it. If the result is not clean, the honest answer is that this image should stay a PNG, or be redrawn by hand in a vector editor.

The honest limits

Tracing cannot invent detail that pixels smeared away, and it cannot read text as text: letters become outlined shapes, not editable type. For a simple two or three color logo, none of this matters and you get a clean, infinitely scalable file. For anything with soft edges, gradients, fine texture, or photographic content, the trace will disappoint, and no setting will fix it because the source simply is not vector-shaped.

There are a few specific limits worth naming so you know what you are looking at when a trace goes wrong. Anti-aliased edges, the soft pixels a PNG uses to smooth a diagonal line, confuse the tracer: it either draws a hard jagged edge where the softness was, or spawns a ring of thin sliver-shapes trying to reproduce the fade. Gradients and drop shadows become visible bands, because the tracer can only represent a smooth blend as a stack of discrete flat regions. Fine text and small details fall below the size threshold and either vanish or dissolve into noise. And even a successful trace of a busy image can produce an SVG with thousands of path elements, which is slower for a browser to render than the PNG would have been and larger on disk, inverting the usual reason to prefer vector. When any of these appear, they are signals that the source image was never a good candidate for tracing, not defects you can tune away.

Tip

Judge a trace by zooming in, not by the thumbnail. At small sizes almost anything looks acceptable; the artifacts that make an SVG unusable only show up when you enlarge it, which is the whole reason you wanted vector in the first place.

If your goal is just a small, scalable web image rather than true vector shapes, converting the PNG to WebP is often the more practical move. Reserve SVG for the cases where the artwork really is flat and geometric.

Better paths when tracing fails

When a trace disappoints, the right response is usually not more tracing but a different approach entirely, and which one depends on why you wanted an SVG.

If you wanted SVG because you need the artwork to scale sharply, the cleanest fix is to find or recreate the true vector source. Logos, icons, and diagrams are nearly always designed in a vector editor first and only exported to PNG afterward, so the original vector file usually exists somewhere. Recovering it gives you a real, editable SVG with none of the artifacts a trace introduces. When the source is genuinely lost and the artwork is simple, redrawing it by hand in a vector editor is often faster and produces a far cleaner file than any automatic trace of the PNG.

If you wanted SVG mainly because you need a small, resolution-independent file for the web, and the image is photographic, then vector is simply the wrong tool. A modern raster format solves that need directly: converting the PNG to WebP gives you a much smaller file that still looks correct, and serving it at the right dimensions handles most scaling concerns. Reserve tracing for what it is genuinely good at, which is turning a flat, geometric graphic whose vector original is missing back into clean, scalable shapes.

Trace your PNG to SVG now

Convert flat logos and icons to scalable vectors in your browser, with nothing uploaded.

Open the image converter

Key takeaways

  • PNG to SVG is tracing, a redraw of pixels into shapes, not a lossless conversion.
  • It works well for flat logos and icons and fails for photos, gradients, and fine detail.
  • A good trace scales to any size without blurring; a bad one is larger and blotchier than the PNG.
  • If you have the original vector file, use it instead of tracing.

References

  1. PNG Specification (Third Edition) - W3C
  2. RFC 2083: PNG (Portable Network Graphics) Specification Version 1.0 - IETF
  3. Scalable Vector Graphics (SVG) 2 - W3C
  4. Scalable Vector Graphics (SVG) File Format Family - Library of Congress