PNG to SVG Converter Free Online — How to Vectorize Images

What Is Image Vectorization?

Vectorization — also called raster-to-vector conversion — is the process of converting a pixel-based (raster) image into a format made of mathematical shapes that can be scaled to any size without losing quality. PNG and JPG are raster formats: they store a fixed grid of colored pixels. Zoom in far enough and you see individual square pixels. SVG is a vector format: it stores shape descriptions — rectangles, paths, circles — that the browser or printer renders at whatever resolution is needed.

Converting a PNG logo to SVG means you can display it at any size — from a 16×16 favicon to a 10-metre billboard — and it will remain perfectly sharp. You can also open the SVG in a design tool and edit individual shapes, change colors, or animate elements with CSS.

When to Convert PNG to SVG

How to Use the PNG to SVG Converter

1. Open the PNG to SVG Converter and drag your PNG, JPG, or WebP file onto the drop zone, or click “Browse file” to select it from your device.
2. Set the threshold using the slider. The threshold is a brightness value from 20 to 240 — pixels darker than this value become part of the SVG shapes, pixels lighter are treated as background. The default of 128 works for most logos with clear black-on-white contrast.
3. Choose a foreground color using the color picker. The default is black (#000000), but you can output the SVG in any brand color.
4. Set the background to transparent (ideal for overlay use) or white (if your SVG will be placed on a dark background).
5. Click Convert to SVG. The tool reads each pixel, applies the threshold, groups adjacent dark pixels into compact rectangles, and generates the SVG.
6. Review the preview. If it looks too detailed or too sparse, adjust the threshold and reconvert. Then click Download SVG to save the file.

Understanding the Threshold Control

Low threshold (20–80): only the darkest pixels

A low threshold treats only very dark pixels as foreground. This is useful for images where the logo or icon is solid black or very dark, but the image also contains grey anti-aliasing at the edges. At a low threshold, the anti-aliased pixels are dropped and only the solid core of the shape is vectorized — producing clean, hard edges.

Medium threshold (80–160): typical logos

The default setting of 128 works for most logos on a white background. Dark text, solid shapes, and clear outlines are captured. Light grey areas — backgrounds, shadows, or faint gradients — are treated as background. This is the right starting point for most corporate logos, app icons, and simple illustrations.

High threshold (160–240): capture mid-tones

A high threshold captures pixels that are medium-grey or darker, in addition to black. Use this when the image contains important detail in mid-tones — for example, a pencil sketch, a halftone illustration, or a logo that uses grey as a secondary color. Be aware that a very high threshold on a photographic image will capture almost every pixel, producing a very large SVG file.

What Makes a Good Source Image

High-contrast logos and icons

Images with clear dark shapes on a light background convert with the most accuracy. A black logo on a white background is the ideal input. Company logos exported from design tools, app icons, and line-art illustrations all tend to produce clean SVG output.

Transparent PNGs

PNG files with a transparent background work well because there is no background color to accidentally include in the foreground shapes. Any pixel with less than 50% opacity is automatically treated as background by the converter, regardless of its color.

What does not convert well

Photographs, gradient-heavy images, and images with complex texture do not vectorize well with threshold-based methods. These images may produce SVG files with tens of thousands of small shapes, which are impractical to use or edit. For such images, a dedicated professional tool (Adobe Illustrator Live Trace, Inkscape Trace Bitmap) or a manual redraw in Figma is more appropriate.

After Converting: Working With Your SVG

Edit in Figma or Inkscape

The downloaded SVG uses <rect> elements — one per group of adjacent pixels in each row. While this produces an accurate shape, it is not the smooth Bézier-curve output you would get from Illustrator's Live Trace. Open the SVG in Inkscape and use Path > Union to merge overlapping shapes, thenPath > Simplify to smooth the edges. In Figma, you can flatten the imported SVG and apply Smooth corner adjustments.

Use as a favicon source

Once you have an SVG version of your logo, feed it into the Favicon Generator to produce all standard sizes (16×16 through 512×512) as PNG files with a single click.

Convert back to PNG at specific sizes

Need a 1200×630 Open Graph image? Export your SVG at a custom width using the SVG to PNG Converter — enter 1200 as the width and the height is calculated automatically. This workflow (PNG → SVG → PNG at custom size) lets you generate perfectly sized raster images from any source logo.

Common Questions

Is the converter accurate for complex logos?

For logos with solid colors and clear edges, the accuracy is very high. The converter captures every pixel that falls below the threshold and represents it faithfully. For logos with anti-aliased edges, smooth gradients, or fine detail, some quality loss is expected — and adjusting the threshold can help recover missing detail.

Why is the SVG file larger than the PNG?

SVG is a text-based XML format. A complex logo may generate thousands of<rect> elements, each described as text, which can result in a file larger than the source PNG. This is normal and expected. The file size does not affect how the SVG scales visually. To reduce file size, open the SVG in Inkscape and run File > Clean Up Document, or use an SVG optimizer such as SVGO.

Can I change the color after downloading?

Yes. The SVG uses a single fill attribute on a group element. Open the SVG in a text editor and change the hex color value in fill="#000000" to any other color. Alternatively, set the fill in CSS using the SVG's class or ID.

Does it work for multi-color logos?

The current tool converts to a single foreground color. For multi-color logos, you would need to run the conversion once per color region — manually separating each color into a separate PNG, converting each to SVG, and then combining the layers in a design tool. Dedicated vectorization software with color quantization (Illustrator, Vector Magic) handles multi-color tracing automatically.

Is my image sent to any server?

No. All processing happens in your browser using the Canvas API. Your image is never uploaded, transmitted, or stored anywhere. The tool works offline once the page has loaded.