PNG to SVG Isn't Real Vector Tracing — It's One rect Per Pixel
If you've ever used one of those "convert PNG to SVG" tools online, you've probably run into something odd. You upload a logo, and the resulting SVG file is much larger than the original PNG — and zooming in still shows the same staircase-like jagged edges. SVG is a vector format, so it's supposed to stay smooth no matter how far you zoom in. Why doesn't it? The answer is simple: most of these tools aren't doing "vector tracing" at all — they're stamping every single pixel back out as its own SVG shape. This guide walks through that difference using the actual code.
1. What real vector tracing actually does
Genuine vector tracing tools — potrace, Adobe Illustrator's Image Trace, Inkscape's Trace Bitmap — do something closer to computer vision. They first simplify colors down to a handful of representative colors (color quantization), find the boundaries between regions of the same color, extract outlines from those boundaries, and then approximate those outlines with bezier curves. In other words, they compute a mathematical path that says "the edge of this region is roughly this curve." For simple graphics like logos and icons, the result is often a much smaller file than the original, and it stays smooth at any zoom level.
2. What this tool actually does: one pixel = one rect
Looking directly at this site's PNG-to-SVG converter source code shows a completely different approach — there's no curve-approximation step at all. It draws the image onto a canvas, reads the pixel data, walks every pixel darker than a brightness threshold one by one, and for each one adds exactly one <rect x="x" y="y" width="1" height="1"/> line at that pixel's position.
for(y) for(x) { if(dark pixel) rects += '<rect x=... y=... width="1" height="1"/>' }There's no step anywhere in the code that simplifies outlines into curves. It generates exactly as many XML elements as there are foreground pixels.
Despite the name "tracing," this approach is closer to simply re-encoding the original raster grid in SVG syntax. That's why zooming into the output still shows the exact same pixel staircase as the original PNG, and why — unless the source is a very simple icon — the file size often ends up much larger than the original PNG (one tag per pixel makes that outcome inevitable).
3. The hidden trap: it never reads the alpha channel
There's a more practical problem too. When this tool decides what counts as foreground versus background, it never reads the pixel's transparency (alpha channel) value — it judges purely by RGB brightness. But it's common for transparent PNGs to still store RGB values under fully transparent pixels, and those stored values are often black (0,0,0) — a common encoding convention for transparent pixels. Feed in a PNG like that, and what should be a transparent background gets misjudged as "dark foreground," which can produce an unexpected black rectangle behind your logo.
4. Large originals get automatically shrunk
Another thing worth knowing: if the original PNG's width or height exceeds 400px, it's automatically downscaled to 400px or less before conversion. Since the structure generates one rect element per pixel, converting a large image without downscaling first would likely produce an unmanageable number of elements. The upshot is that a large image gets converted based on the downscaled resolution, not its original one.
5. So when should you actually use this
- This tool is a good fit when: you just need a file with a .svg extension, or you want to quickly wrap a very simple, small icon inside an SVG container.
- This tool is not a good fit when: you need a logo to stay smooth at any zoom level, you need editable curve paths, or you're converting an image with a transparent background — in those cases, use a tool that performs real outline tracing, such as potrace, Adobe Illustrator's Image Trace, or Inkscape's Trace Bitmap.
Frequently asked questions
Q. Is the SVG this tool produces actually made of curved paths?
A. No. It's built by stamping out one 1×1 <rect> tag for every pixel darker than the threshold. There's no step that simplifies anything into curves, so zooming in shows the exact same jagged pixel boundaries as the original.
Q. If I feed in a PNG with a transparent background, is the background handled correctly?
A. Not guaranteed. Since it judges foreground versus background purely by RGB brightness without reading the alpha (transparency) value, if the RGB stored under a transparent pixel happens to be black, it can be misclassified as black foreground instead of background.
Q. Can the SVG file end up larger than the original PNG?
A. Yes, and it's common. Since one <rect> element is generated per foreground pixel, the file size often exceeds the original PNG's unless the source is a very simple icon.
Q. If I upload a large image, is it converted at its full original resolution?
A. No. If the width or height exceeds 400px, it's automatically downscaled to 400px or less before conversion.
Q. What tool should I use if I actually need real vector tracing?
A. Use a dedicated tracing tool that approximates color-region boundaries with bezier curves, such as potrace, Adobe Illustrator's Image Trace, or Inkscape's Trace Bitmap. These tools genuinely simplify outlines to produce smooth, editable paths.