PNG to SVG Converter — Vectorize Images Free Online
Upload a PNG or JPG logo or icon, set the threshold, choose your foreground color, and download a scalable SVG. No signup required — runs entirely in your browser.
⏱ 6 min read · Complete guide below
Drop your PNG or JPG here
Best results with logos, icons, and simple illustrations
Browse fileHow PNG to SVG Conversion Works
- 1Upload your image — drag a PNG, JPG, or WebP file onto the drop zone or click to browse. Logos and icons on a plain background work best.
- 2Adjust the threshold — slide left for more detail (captures lighter pixels), or right for less (only the darkest pixels). Preview updates on each conversion.
- 3Choose colors — pick a foreground color for the shapes, and set the background to transparent or white.
- 4Download the SVG — click Convert to SVG, preview the result, then download the file. The SVG can be scaled to any size without quality loss.
PNG vs SVG — Understanding the Difference
PNG is a raster format — it stores a fixed grid of pixels. Scale it up and you see blurry edges. SVG is a vector format — it stores mathematical descriptions of shapes. Scale it to any size and it remains perfectly sharp. Converting a PNG logo to SVG makes it resolution-independent, editable in design tools, and usable in print workflows where raster images fall short.
What Vectorizes Well — and What Doesn't
The single most important thing to know before converting is that vectorization suits some images and is fundamentally wrong for others. It works because the tool traces distinct shapes out of a picture, so it shines on logos, icons, silhouettes, and simple line art — images built from a few solid areas of colour with clean edges. A black company logo on a white background is the ideal case: the boundary between foreground and background is obvious, so the resulting SVG is compact and stays razor-sharp at any size. Photographs are the opposite: a photo is millions of subtly varying pixels with no hard edges, and trying to trace it produces either a muddy mess or an enormous file with tens of thousands of shapes. The practical rule is to reach for this tool when you have flat graphic artwork you want to scale or edit, and to leave photographs as raster PNGs or JPGs. If your source has soft shadows or anti-aliased edges, simplifying or increasing its contrast first gives the tracer a cleaner boundary to follow.
Pixel Tracing vs Curve Tracing
It also helps to understand what kind of vectorization this tool does, because it explains the look of the output. This converter uses a pixel-accurate approach: it decides which pixels are foreground using the threshold, then groups them into rectangles, producing an SVG that reproduces the shape exactly and scales without blurring. The trade-off is that the edges are made of tiny steps rather than smooth curves, so a circle traced this way is geometrically precise but slightly blocky up close. More sophisticated curve-tracing algorithms — such as Potrace, used by Inkscape's “Trace Bitmap” and Illustrator's Image Trace — instead fit smooth Bézier curves to the outline, giving a cleaner result for artwork that will be printed large. A good workflow is to use this tool for a fast, resolution-independent SVG, then open it in a vector editor if you want to smooth the paths further. Either way, the payoff of getting to SVG is the same: a file you can recolour, resize, and edit freely rather than a fixed grid of pixels.
Tips for Better Vectorization Results
Use a white or transparent background
Images with a clean solid background convert much better than those with gradients, shadows, or complex surroundings.
Start with a high-resolution source
A larger source image gives the algorithm more pixels to work with, producing more accurate shape boundaries in the SVG output.
Try multiple threshold values
There is no single correct threshold. Experiment — logos with grey elements may need a higher threshold (150+) to capture all detail.
Pre-process complex images
If your PNG has shadows or anti-aliased edges, run it through the Image Compressor or Cropper first to simplify the image before vectorizing.
Use transparent background for overlays
Choosing the transparent background option produces an SVG that can be placed over any colored surface without a white box appearing behind it.
Edit the SVG after download
Open the downloaded SVG in Figma, Inkscape, or Illustrator to smooth curves, simplify paths, and convert the rect-based output into clean Bézier paths.
Frequently Asked Questions
How does the PNG to SVG conversion work?
The tool loads your image onto an HTML Canvas, reads every pixel, and applies a brightness threshold to decide which pixels are "foreground" (dark) and which are "background" (light). It then groups adjacent foreground pixels into compact rectangles and outputs them as SVG <rect> elements — creating a true scalable vector file.
What types of images convert best?
Logos, icons, silhouettes, and simple line drawings with clear dark/light contrast convert best. Images with a solid or transparent background and simple shapes — such as a company logo on a white background — produce the cleanest results. Complex photographs with many colors and gradients are not suitable for this type of vectorization.
Will my image be uploaded to a server?
No. All processing happens entirely in your browser using the Canvas API. Your image is never uploaded, transmitted, or stored. The tool works offline once the page has loaded.
What does the threshold slider control?
The threshold determines which pixels are treated as "dark" (foreground) and which as "light" (background). A lower threshold (e.g. 80) captures only very dark pixels — useful for high-contrast logos. A higher threshold (e.g. 180) captures more pixels, including mid-tones — useful when the image has grey tones you want to include in the SVG.
Can I change the color of the SVG output?
Yes. Use the foreground color picker to choose any color for the vectorized shapes. The default is black (#000000), but you can switch to any brand color before converting.
The SVG output looks blocky — is that expected?
Yes. This converter uses a pixel-based vectorization that preserves exact shape boundaries. The output is geometrically accurate and fully scalable, but does not include smooth Bézier curves. For smooth curves, a dedicated desktop tool such as Adobe Illustrator's Live Trace or Inkscape's Trace Bitmap (which implements the Potrace algorithm) is recommended.
What is the maximum image size?
There is no hard file size limit. However, large or complex images may generate more than 50,000 shapes, at which point the tool will show an error and ask you to use a smaller or simpler image. For best results, resize your image to under 1,000 × 1,000 px before converting.