How to convert PNG to SVG
- Add the image. Drop a PNG or JPG on the box, click it to choose one, or paste an image you copied. The tool traces it straight away with the Logo or icon preset.
- Pick a preset, then fine tune. Logo or icon suits flat artwork, Illustration suits drawings with some shading, and Photo gives a poster effect. Change the number of colors first: it makes the biggest difference. Every change traces the image again.
- Compare and download. The original and the SVG sit side by side. When the edges look right, download the
.svgfile or copy the code to paste into a web page, a design tool or a CMS.
There is nothing to install and no account. To go the other way, from a vector to a sharp PNG at any size, use the SVG to PNG converter.
What the converter does, and what it cannot do
A PNG or a JPG is a grid of pixels. An SVG describes shapes: paths with curves, filled with colors, that stay sharp at any size. Converting one into the other is called tracing. The tool groups the pixels into the number of colors you choose, follows the outline of each area, and fits straight lines and curves to those outlines.
That is an approximation of the image, not a reconstruction of how it was drawn. The tracer does not know that a shape is a letter, a circle or a straight edge, so letters come out slightly wobbly, circles slightly uneven and thin lines can break. On a clean, high resolution logo the result can be close enough to use. On a small, blurry or compressed image it reproduces the blur and the compression blocks as shapes.
| Image | How well it traces | Start with |
|---|---|---|
| Logo, icon or monogram with flat colors | Well, if the PNG is large and sharp | Logo or icon, 2 to 8 colors |
| Black and white line art, stamps, signatures | Well | Logo or icon, 2 colors |
| Flat illustration with a few shades | Fairly well, with heavier files | Illustration, 12 to 24 colors |
| Small or blurry logo, screenshot of a logo | Poorly: edges come out rough | Logo or icon with smoothing 1 to 2 |
| Photo, gradient or texture | Badly: thousands of color patches | Keep the JPG, or use Photo for a poster effect |
Getting a cleaner SVG
- Start from the largest, sharpest file you have. The tracer can only follow the edges in the pixels. A 1,000 pixel wide logo traces far better than a 150 pixel one taken from a website header.
- Use as few colors as the design really has. A two color logo traced with 16 colors gets extra paths for the soft pixels along every edge. Set the count to the real number of colors, plus one for the background if it is not transparent.
- Smooth noisy images. JPG compression leaves speckles around edges. A smoothing of 1 or 2 and a higher speck limit remove most of them.
- Watch the file size. A good trace of a logo is often smaller than the PNG. If the SVG is many times bigger, the image is too detailed for tracing and the PNG or JPG is the better file to keep.
A transparent PNG keeps its transparency: transparent areas are left out of the SVG, so the logo sits on any background. Semi-transparent edge pixels become shapes with partial opacity.
When a traced logo is not enough
Printers, sign makers and embroidery shops ask for a vector logo because they cut, engrave or scale it, and every wobble shows. Brand guidelines need exact colors, and a traced file only has colors averaged from pixels. If the logo exists only as a small PNG or a photo of a sign, the reliable fix is to redraw it by hand as a vector: true geometric curves, the real typeface or a matched one, and exact color values. Traced files are fine for a quick preview, a cutting machine at home or an icon on a slide.
Is it safe and private
The image never leaves your device. The page reads it with your browser, traces it with an open source library running in the page, and builds the SVG on your computer or phone. There is no upload and no queue, and once the page has loaded it keeps working offline.
Methodology and limits
- Tracing
- The image is traced by imagetracer.js 1.2.6, a public domain library by András Jankovics. It reduces the image to the number of colors you set (palette sampled from the image, refined over 3 cycles), scans the outline of each color area, and fits straight lines and quadratic curves within the error set by curve simplification (0.1 to 4.0 pixels).
- Presets
- Logo or icon: 6 colors, no smoothing, simplification 1.0, specks up to 8 px ignored. Illustration: 16 colors, smoothing 1, 1.0, 8 px. Photo: 32 colors, smoothing 2, 1.5, 4 px. Right angle corners are kept sharp in every preset.
- Size
- Images larger than 1,200 pixels on their longer side are scaled down to 1,200 for tracing, then the paths are scaled back up, so the SVG has the width and height of the original in pixels.
- Output
- The SVG holds one filled path per shape, with hex colors, coordinates rounded to one decimal, a viewBox, and no strokes, scripts or embedded images. Fully transparent areas are left out.
- Limits
- One image at a time, up to 100 million pixels and 16,384 pixels on a side. Tracing runs on the page, so a large photo with many colors can take several seconds and freeze the page while it works. The tracer does not recognize text, so letters are traced as shapes, not as editable type.
Sources
- imagetracerjs, András Jankovics, the tracing library used in the page, with its algorithm description and options
- Scalable Vector Graphics (SVG) 2: Paths, W3C, the path commands the SVG is written in
- SVG paths tutorial, MDN Web Docs, on lines and curves in SVG
- Image file type and format guide, MDN Web Docs, on PNG, JPEG and SVG