PNG to SVG: What Vectorizing Can and Can't Do

A client sends over their logo as a PNG. It's 400 pixels wide. You need it printed across a two meter banner, and blown up that far it turns into a soft, blocky smear. So you search "png to svg" and find twenty tools all promising a clean vector file in one click.

Some of them will deliver exactly that. Others hand you a 3 MB SVG that renders slower and looks worse than the PNG you started with. The tool usually isn't what decides which one you get. The image you feed it is.

PNG and SVG store a picture in completely different ways

A PNG or a JPG is a grid of colored dots. Millions of tiny squares, each assigned one color. Zoom in far enough and you can count them. That's a raster image, and it's why enlarging a small logo goes badly: there are no extra dots to show you, so the software invents them by smearing the ones it already has.

An SVG is a list of instructions instead. Draw a circle here, fill it with this shade of red. Curve a line from this point to that one. Nothing is stored as dots, it's stored as shapes and coordinates, and your browser redraws them at whatever size you ask for. That's a vector image. A logo saved as SVG is exactly as sharp on a phone icon as it is on the side of a building, and it's often a much smaller file too.

Which means converting PNG to SVG is a raster to vector job, and there's no clean mathematical way to do it. The software has to guess. It reads your pixels, groups similar colors together, draws an outline around each group, and saves those outlines as shapes. That guessing process is called tracing. It's excellent on some images and genuinely useless on others.

What traces well

• Logos and wordmarks with flat, solid colors
• App icons and interface symbols
• Line art, sketches, inked drawings
• Scanned signatures and handwriting
• Stickers, badges, simple flat illustrations
• Charts and diagrams with solid fills
• Silhouettes and stencils, basically anything you'd cut out of vinyl

The common thread: a small number of solid colors, and edges you could trace with a pen without lifting it.

What falls apart

• Photographs. Any photograph. This is the big one.
• Gradients, soft glows, drop shadows
• Blurred or feathered edges
• Textures: fabric, wood grain, film grain, noise
• Small text baked into the image
• Heavily compressed JPEGs, where the compression blotches get traced as if they were real detail

Here's what actually happens when you vectorize a photo. The tracer has no idea what a face is. It sees a gradual slide from one skin tone to the next, and it has to chop that slide into a fixed number of flat bands. So a cheek turns into six overlapping blobs with hard edges between them. Repeat that across the whole frame and you've got tens of thousands of separate shapes stacked on each other.

File size goes the wrong way too. A two-color logo that started as a 90 KB PNG will often trace down to under 10 KB of SVG. Run the same tracer over a portrait at a high color count and the SVG can come out several times larger than the JPEG you started with, while forcing the browser to do far more work to draw it. You paid more and got something uglier. (Treat those numbers as illustrative, real results swing a lot by image, but the direction holds every time.)

If you like the flattened poster-print look, tracing a photo on purpose is a perfectly good style choice. As a way to "improve quality" it just doesn't work, and no amount of slider-fiddling changes that.

A ten second test before you convert

Look at the image and ask two questions. How many solid colors can you count? And do the edges stay crisp, or do they fade out?

Under roughly ten flat colors with sharp edges: trace it, you'll be happy. Lots of colors bleeding into each other: skip it, or accept that you're making poster art rather than a faithful copy.

The squint test also works. Squint until the image goes fuzzy. If it still reads as a handful of distinct shapes, the tracer will find those shapes. If it dissolves into mush, so will your SVG.

How to convert PNG to SVG

1. Open the Image Vectorizer and drop in your PNG, JPG, or WebP.
2. Pick a tracing preset. Default is the sensible middle. Sharp keeps hard corners, good for geometric logos. Curvy smooths everything, good for hand-drawn shapes. Detailed keeps more of the fiddly bits and costs you file size.
3. Choose Full Color or B&W. For a one-color logo or a scanned signature, B&W gives noticeably cleaner paths.
4. Trace it, then view the result at full size before you download anything.
5. Adjust and trace again if it looks off. This is normal. Most images want two or three passes.
6. Download the SVG, or copy the code straight to your clipboard.

The settings actually worth touching

Max colors changes more than anything else. It caps how many flat colors the tracer is allowed to use, anywhere from 2 up to 64. Most logos want something between 2 and 8. Pushing it to 64 hoping for accuracy is exactly how you end up with a bloated file stuffed with near-identical shapes.

Noise smoothing blurs the image slightly before tracing. Sounds backwards. It's the fix for scans and screenshots, because it merges the speckle so the tracer doesn't turn every stray pixel into its own path. Start at 0 and nudge it to 1 or 2 if the output looks grainy.

Filter small specks discards shapes below a size you set. If you scanned artwork off a page with dust on it, this is your button.

Path precision decides how tightly the outlines hug the original pixels. High precision means more accuracy and more points in the file. Low means smoother, simpler, smaller.

Clean output runs the SVGO optimizer over the result automatically. Leave it on.

What tracing can never give you back

Most "convert png to svg" pages go quiet here, and this part matters if you're vectorizing a logo for real work.

Text stays text-shaped but stops being text. If the logo has the company name in it, the tracer draws the outline of each letter. You can't retype it, swap the font, or fix a typo. To any SVG editor it's a pile of curves that happen to look like an R.

Perfect shapes stop being perfect. A circle becomes a many-point curve that's approximately round. Straight lines pick up a faint wobble. At favicon size nobody will ever notice. Printed three meters wide, sometimes they do.

Layers and names are gone. The original file might have had the icon and the wordmark neatly separated. The trace gives you a flat stack of anonymous paths with no structure at all.

So, honest advice: before you trace a logo, spend five minutes chasing the source file. An .ai, .eps, .pdf, or .svg export takes the designer thirty seconds to dig out and it's perfect, not approximate. Tracing is what you do when that file is truly gone, or when the person who made it left in 2019 and nobody has their hard drive. It's a repair job. It isn't a substitute for the original.

Clean the output afterwards

Even a good trace produces more code than it needs: six decimal places on every coordinate, empty groups, metadata nobody will ever read. Pushing the result through the SVG Optimizer usually cuts a real chunk off the file with zero visible change. It's the step almost everyone skips.

Going the other direction later, say you need a sharp PNG at 2x or 4x from your finished vector, the SVG Converter handles that. And if you're just trying to make a PNG smaller rather than turn it into a vector, the Image Compressor is the tool you actually wanted. Our breakdown of how PNG compression works covers why that often gets you further than vectorizing.

Testing on artwork you can't upload

Most online vectorizers send your file to their server, trace it there, and send an SVG back. Fine for a stock icon off a free site. Less fine for a rebrand that hasn't been announced, client artwork you signed an NDA over, or a scan of your own signature.

ZeroPNG's vectorizer runs the tracing engine inside your browser tab. The file is read into memory on your machine, traced there, and written back out. Nothing is uploaded, so you can drop your Wi-Fi mid-session and keep working. Useful when the whole task is testing five variations of a logo nobody outside the company has seen. If that concern is new to you, this piece on what happens to files you upload is worth ten minutes.

Frequently Asked Questions

Can I convert a photo to SVG?

Technically yes, practically no. The tracer flattens smooth color transitions into hard-edged blobs, so you get a posterized version of your photo in a file that's usually bigger and slower than the original. Use it as a deliberate art style, not as a quality upgrade.

Why is my SVG larger than the PNG?

Too many colors, or too much detail. Every distinct color region becomes its own shape with its own coordinate list. Drop the max colors setting, raise the speck filter, and lower path precision. If it's still huge after that, the image probably isn't a good candidate for vectorizing.

Does converting PNG to SVG improve image quality?

It doesn't add detail that wasn't there. What it gives you is infinite scaling: the traced shapes stay crisp at any size, so a low-res logo stops looking blurry when enlarged. The tradeoff is that fine detail gets simplified away in the process.

What settings work best for a logo?

Full Color mode with max colors set to the actual number of colors in the logo, usually 2 to 6. Noise smoothing at 0 if the source is clean, 1 if it came from a screenshot. Sharp preset for geometric marks, Default for everything else. Then check the preview at full size.

Can I edit the SVG after tracing?

You can open it in any vector editor and move, recolor, or delete individual paths. What you can't do is edit traced letters as text or reshape a traced circle with a circle tool, because those are ordinary curves now, not real text or geometry.

Is JPG to SVG different from PNG to SVG?

The tracing works identically. JPGs just tend to trace worse, because JPEG compression leaves faint blotches and halos around edges that the tracer reads as genuine detail. If you have both versions of an image, always trace the PNG.