How to convert a PNG or JPG to SVG
- Add your pictures. Drop one or many anywhere on the page, paste one, or click the box to choose files. PNG, JPEG, WebP, GIF, BMP and iPhone HEIC pictures work.
- Choose a style. Logo or icon is chosen already. The preview shows the traced vector straight away, and Show the original flips back to your picture to compare.
- Adjust it. Colors sets how many flat colors the vector uses. Remove specks drops tiny shapes, and Smoothness decides how closely the curves follow the pixels.
- Press Make the SVG and download each file, or all of them as a ZIP. Copy the SVG code puts the SVG text on your clipboard instead, to paste into a web page or a design tool.
Your original files are never changed. Each SVG is named after its picture, has the picture's own width and height, and scales to any size without getting blurry.
What this does, and what it does not
This is tracing: the tool sorts the pixels into a few colors, follows the outline of each color area, and fits straight lines and curves to it. That is the right tool for a flat picture: a logo, an icon, clip art, a drawing or a signature. It is not a way to turn a photograph into a true vector. A photo has millions of subtly different colors, and tracing it gives either a poster-like picture with a few flat colors, or a file with tens of thousands of shapes.
| Picture | Style | Result |
|---|---|---|
| A logo with text, a disc, a star and thin lines (800 × 500 PNG, 25 KB) | Logo or icon, 8 colors | 37 shapes, an 8 KB SVG, and the drawn-again SVG differs from the PNG by 1.3 levels out of 255 on average. |
| The same logo | Detailed, 24 colors | 329 shapes, 29 KB, a difference of 0.8. More faithful, and a bigger file than the PNG. |
| A product photo of headphones on white (69 KB JPEG) | Logo or icon, 8 colors | Close to the photo (a difference of 2.9), but 1,499 shapes and a 346 KB file. |
| A full-size car photo (1,600 × 1,200) | Detailed, 24 colors | 66,143 shapes and a 7.8 MB SVG. The Logo or icon style gives 6,855 shapes and 2.1 MB. |
So for photos, expect a posterized, illustrated look and a file larger than the JPEG. If you want a smaller, sharper picture, upscaling or compressing the photo is the better tool.
The three styles
- Logo or icon (8 colors, starting values). Flat colors and smooth shapes. Use it for logos, icons, clip art and drawings.
- Black and white. Just black shapes on white: signatures, line art, stencils and cut files. In our test it turned the same colored logo into 16 shapes in black and white and a 7 KB file, so only use it when you want one color.
- Detailed (24 colors, few specks dropped, close curves). More colors and more detail, for illustrations and photos. The file is much bigger.
The settings
- Colors (2 to 32). Shapes are drawn in this many flat colors. Pick roughly the number of colors in your picture: a logo with five colors looks right at 6 to 8. Too few merges different colors, and too many splits the soft edges of anti-aliasing into extra shapes.
- Remove specks (0 to 100). Outlines with fewer points than this are dropped. Higher gives a cleaner, smaller file, and lower keeps fine detail. It is a real trade-off: on the headphones photo at 16 colors, keeping every speck (0) gave a difference of 1.1 and a 2.8 MB file, dropping the small ones (8) gave 2.7 and 947 KB, and the starting value of 20 gave 6.7 and 294 KB, because a dropped speck leaves a gap that shows the shape under it.
- Smoothness (1 to 10). How far a curve may stray from the pixels. 1 follows every wobble, and 10 gives long smooth curves and a smaller file.
- Make the background see-through. Leaves out the shapes of the color that matches the picture's background (found from its edge), so the SVG has no background rectangle. It needs a plain background.
- Preview on only changes what you look at.
How the colors are picked
The tracing library, ImageTracer (public domain), can pick its own colors, but at few colors it went muddy: on our test logo at 8 colors it turned the red and teal shapes into plum and green, made 325 shapes and was 14.5 levels off. This page picks the colors itself, by grouping the picture's colors the way the eye does (clustering in Lab, the same method as our color picker's palette), snapping near-white to white and near-black to black, and hands the palette over. The same logo at 8 colors then came out in its true colors with 37 shapes, 1.3 levels off.
Saving and limits
- Size. The SVG has the picture's own width and height. A picture larger than 1,600 pixels on its longer side is traced at 1,600 and scaled back, which keeps tracing quick: a flat 12-megapixel picture (4,000 × 3,000) took about 0.5 seconds, and a detailed 1,600 × 1,200 photo about 2.6 seconds, measured on a busy Apple M1 Max.
- Over 50 megapixels is refused with a message.
- The file is plain SVG text: shapes of one color are grouped, colors are written as hex codes, and nothing is embedded. It uses only standard SVG elements (svg, g and path), so browsers and vector editors can open it, and we checked that it draws again correctly in a second renderer (librsvg).
- Many pictures at once. The settings apply to all of them, and the finished files can be downloaded as one ZIP.
- SVG files as input are not accepted, because an SVG is already a vector.
Ideas for using it
- A small old logo that you only have as a PNG, to use on a large banner, a shirt or a sign.
- Icons that scale from a favicon to a poster.
- Craft and cutting machines: a black-and-white trace of a drawing or a line drawing from a photo.
- A signature as a clean, scalable shape. Use Make Background Transparent first if you want it on a colored page as a PNG.
- A flat, illustrated look for a photo, at a few colors.
Privacy
- The tracing happens inside this tab, in a background worker, and your files on disk are never changed or deleted.
- For what this site collects and keeps, see our privacy policy.
Frequently asked questions
How do I convert a PNG or JPG to SVG?
Add the picture, leave the style on Logo or icon, and press Make the SVG. The preview shows the vector first. Change Colors to match how many colors your picture has, then download the file.
Is this a real vector, or just the picture inside an SVG file?
A real vector. The SVG contains shapes and curves, grouped by color, and no embedded picture. That is why it stays sharp at any size.
Why is my SVG bigger than the original JPG?
A photo has thousands of tiny color changes, and each one becomes a shape. In our tests a full-size photo traced with 24 colors gave 66,143 shapes and 7.8 MB. Lower Colors, raise Remove specks and Smoothness, or keep the photo as a JPG: tracing is made for flat pictures.
Why did my logo get the wrong colors?
The palette has too few colors, so two different colors were merged. Raise Colors until each color of your logo has its own, and check the preview against Show the original.
Why are there gaps or missing small details?
Remove specks drops small shapes, and a dropped shape leaves a gap that shows the color underneath. Lower Remove specks to bring the detail back, at the cost of a bigger file.
How do I get a black and white SVG for a cutting machine?
Choose Black and white. It makes black shapes on white. Raise Smoothness for cleaner curves, and turn on Make the background see-through if your program needs only the black shapes.
Can I make the background of the SVG transparent?
Yes: turn on Make the background see-through. The shapes of the color that matches the picture's background are left out, so there is no background rectangle. It needs a plain background.
Is this AI?
No. It is a classic tracing method: group the colors, follow each color's outline, and fit lines and curves. That is why it is fast, runs on any device and has no model to download.
Is my picture sent anywhere to be traced?
No. The tracing is done in your browser tab. For what the site collects and keeps, see our privacy policy.