How to convert a PNG or JPG to SVG (and when you shouldn't)

You convert a PNG or JPG to SVG by tracing it: software finds the edges and color regions in the pixels and rewrites them as vector paths. It works well for logos, icons and flat illustrations. It works badly for photos, and if you only need the image to scale, you may not need to convert anything at all.

This post covers what actually happens during a conversion, four ways to do it (manual tracing, Inkscape, potrace on the command line, AI vectorizers), how they compare, how to prepare the input, and how to clean the result with SVGO.

Raster vs vector in one minute

A PNG or JPG is a grid of colored pixels. Zoom in far enough and you see squares. An SVG is a text file describing shapes: paths, fills, strokes. Zoom in and the shapes are re-rendered at the new size, so edges stay sharp.

Converting raster to vector is not a format change like PNG to WebP. The pixels carry no shape information, so a converter has to infer outlines from color boundaries. That inference is a guess, and the quality of the guess depends almost entirely on how simple the source is.

A flat two-color logo has obvious boundaries. A photo has millions of soft gradients and no real edges. Tracing a photo gives you either a huge file full of tiny shapes or a posterized, stylized version of it.

Should you convert at all?

Check these before you open a tracing tool:

• You have the original. If a designer made the logo in Figma, Illustrator or Inkscape, ask for the source or an exported SVG. A traced copy will always be worse than the original.
• You only need it sharp on retina screens. Export a larger PNG, or use srcset. No conversion needed.
• It is a photo. Use WebP or AVIF. A traced photo is an art effect, not a faithful copy.
• It is a screenshot or has lots of text. Text will become outlines of slightly wrong letters. Retype it as real text.

Conversion makes sense when you have a flat raster logo, icon, sketch or illustration and no source file, and you need clean scaling, recoloring or animation. That last one matters: you cannot animate parts of a PNG with CSS, but you can animate the separate paths of an SVG.

Option 1: Trace by hand

Open the raster in Figma, Illustrator, Inkscape or Affinity as a locked background layer and redraw the shapes with the pen tool.

This is the slowest route and the most accurate. You choose where every node goes, you use real circles and rectangles where the original had them, and you end up with a small, tidy file with sensible layers. For a brand logo that will be used for years, it is worth the hour.

Option 2: Inkscape's Trace Bitmap

Inkscape is free and ships a tracing dialog. Import your image, select it, then open Path > Trace Bitmap (Shift+Alt+B). The Tracing an Image chapter of the Inkscape manual walks through the dialog.

The settings that matter:

• Single scan modes give you one traced shape, such as a black silhouette. Brightness cutoff is the usual pick for line art and one-color logos. Edge detection gives outlines.
• Multiple scans produce several stacked layers, for example by brightness steps or by color. This is the mode to try for flat multicolor art.
• Use the live preview in the dialog and adjust the threshold or the number of scans until small features survive without noise.

After tracing, Inkscape leaves the bitmap in place under the new vector object. Move or delete the original to see the result. Then use Path > Simplify (Ctrl+L) to reduce the node count if the path is heavy.

Inkscape's tracing is deterministic. The same image and settings give the same output every time, and the result follows the pixel boundaries closely.

Option 3: potrace on the command line

Potrace by Peter Selinger is the tracing engine behind a lot of other tools, and it is easy to script. The catch is in the man page: the input is a bitmap in PNM or BMP format, and it should use only two colors. If other pixel values appear, potrace thresholds them to black or white.

So the usual pipeline is to convert and threshold first, then trace. With ImageMagick:

magick logo.png -background white -alpha remove -colorspace Gray \
  -threshold 50% logo.pbm
potrace --svg logo.pbm --output logo.svg

Useful flags from the man page:

• --turdsize 5 ignores specks up to that many pixels. Raise it to remove scanner noise.
• --alphamax 1.0 controls corner smoothness. Lower values keep sharper corners.
• --opttolerance 0.2 sets how aggressively curves are merged. Higher values give fewer nodes.

Potrace produces one color, so a multicolor logo needs one pass per color. You trace each color mask separately and stack the outputs. That is fine for two or three colors and tedious for ten.

Option 4: AI vectorizers

AI vectorizers use a model instead of a threshold. You upload a PNG, JPEG or WebP and get SVG code back. The model decides which regions are shapes, how to group them and what color to give them, so you get multicolor output in one step, often with gradients.

SVG Weave's image to SVG tool is one of these. It accepts PNG, JPEG and WebP (not GIF) up to about 7.5MB, and each conversion costs a fixed 50 credits. It is paid, with packs starting at $5 and no free tier, so for a one-off two-color logo, Inkscape or potrace is the cheaper choice. Where it fits is when you want a multicolor flat illustration vectorized quickly and then animated in the same project.

Be clear about what a model does: it interprets the picture. Expect merged or simplified shapes, and expect that results can differ run to run. Photos come back as a stylized approximation, not a copy. Check the result against the original before shipping it.

Trade-offs at a glance

None of these is best everywhere. Pick by the shape of the job, not by which one sounds newest.

Prepare the input image

Tracing output is capped by input quality. Five minutes of cleanup helps every method above.

• Use the largest, cleanest source you have. A 1000px logo traces better than a 100px one scaled up. Blur from upscaling becomes lumpy edges.
• Prefer PNG over JPG. JPEG compression adds halos and noise around edges, and a tracer sees those halos as real shapes. If JPG is all you have, run a light denoise first.
• Remove the background. A transparent PNG or a plain solid background avoids a stray background rectangle in the output.
• Flatten gradients and shadows if you can. Drop shadows turn into dozens of thin slivers.
• Crop tight. Empty margins are wasted work, and some tools size the viewBox to the whole image.
• Reduce colors before tracing. If the art is meant to be five flat colors, quantize it to five in an image editor first. Antialiased edges add intermediate colors that otherwise become extra shapes.
• Fix size limits early. If a tool caps upload size, resize beforehand. SVG Weave rejects images over about 7.5MB, for example.

Clean up the output with SVGO

Raw tracer output is rarely tidy. It can include editor metadata, long coordinate precision and redundant groups. SVGO is a Node.js optimizer that removes that:

npx svgo logo.svg --output logo.min.svg

By default it runs preset-default, which strips metadata, comments and editor data, shortens path data and merges compatible paths. The visual result should be unchanged. Always diff the rendering, not just the file size.

Two things to watch:

• Lower precision cuts size but can distort small shapes. Check icons at small sizes before and after. Raise precision if curves look off.
• Animation hooks can be removed. If you plan to animate the SVG, test after SVGO. Plugins such as mergePaths and convertShapeToPath change element structure, and cleanupIds can drop or rename ids that nothing references. SVGO backs off id cleanup when a style element is present, but verify. You can switch a plugin off by name:

// svgo.config.js
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          mergePaths: false,
          cleanupIds: false,
        },
      },
    },
  ],
};

Then run npx svgo logo.svg --config svgo.config.js. If you keep the ids intact, you can go straight from a traced file to an animation. A prompt-driven tool like the SVG animation generator targets elements by id, so keeping them is useful.

FAQ

Can I convert a JPG to SVG without losing quality?

Not in the sense of a lossless conversion. A JPG has no shape data, so the converter reconstructs outlines and the result is an approximation. For flat graphics the approximation can look identical at normal sizes. For photos it will look stylized.

What is the best free way to convert PNG to SVG?

Inkscape's Trace Bitmap for a one-off job, potrace for scripts and batches. Both are free and deterministic. Potrace only handles two-color bitmaps natively, so use Inkscape's multiple scans for several colors.

Why does my traced SVG look blobby or jagged?

Usually the input was low resolution or had JPEG noise. Start from a larger, cleaner PNG, raise the noise-suppression setting (--turdsize in potrace) and try again. Lowering the smoothing value keeps corners sharp on logos with geometric shapes.

Does image to SVG work on photos?

Technically yes, but you get a stylized, posterized look, not a faithful copy. If you want that look, fine. If you want the photo, keep it as WebP or AVIF.

Can I convert a GIF to SVG?

Most tracers need a still image. Extract a single frame as PNG and trace that. SVG Weave's image to SVG tool accepts PNG, JPEG and WebP, not GIF.

Why is my SVG larger than the PNG?

Tracing detailed art makes thousands of path nodes, and path text can outweigh a compressed bitmap. Raise the simplification setting, reduce colors in the source, and run SVGO. If it is still larger, the image probably should stay a raster.

Where to go next

If the converted SVG is meant to move, the next step is adding CSS keyframes to its paths. See SVG animation performance and accessibility for how to do that without hurting frame rate or readers who prefer reduced motion.