How to Convert PNG to SVG (3 Free Methods)

Converting PNG to SVG is not a format swap — it is a fundamentally different kind of conversion. PNG stores images as a grid of colored pixels. SVG describes images as mathematical paths and shapes in XML. To convert PNG to SVG, tracing software analyzes the pixel data and reconstructs it as vector paths. The output is an approximation, and the quality depends on what your PNG actually contains.

The good news: PNG has properties that make it a better tracing source than JPG. PNG is lossless, so there are no compression artifacts muddying the edges. PNG supports full alpha transparency, which means logos and icons already isolated on transparent backgrounds trace cleaner — no need to fight a white background. If you have a choice between tracing a JPG and a PNG of the same graphic, pick the PNG every time.

Here are three free methods for converting PNG to SVG, from fastest to most powerful.

Why Convert PNG to SVG?

SVG solves problems that PNG cannot:

• Infinite scalability. A PNG logo at 200x200 pixels looks blurry on a Retina display. The same logo as SVG stays razor-sharp at any size — favicon to billboard.
• Smaller file sizes for graphics. A simple icon that weighs 45 KB as a PNG might weigh 3 KB as an SVG. Fewer bytes, faster page loads.
• CSS and JavaScript integration. Inline an SVG and style it with your site's stylesheet. Change colors on hover, animate strokes, respond to dark mode — impossible with a PNG.
• Editable paths. SVG is XML. Open it in a text editor, find-and-replace a hex color, tweak a curve, delete an element. Try that with a PNG.
• Native transparency without file size cost. PNG supports transparency but pays for it with larger files. SVG supports transparency inherently, with no size penalty. (For a full breakdown of these tradeoffs, see SVG vs PNG: When to Use Each Format.)

The common use case: you have a logo, icon, or illustration as a PNG — maybe exported from a design tool, maybe received from a client, maybe scraped from a website — and you need it as a scalable vector. That is exactly what these three methods handle.

Method 1 — Pixotter Online Converter

Pixotter's converter runs entirely in your browser via WebAssembly. Your images never leave your machine — no upload, no server, no privacy concerns.

How to Use It

1. Open pixotter.com/convert.
2. Drop your PNG file onto the page (or click to browse).
3. Select SVG as the output format.
4. Download your converted file.

Why Start Here

• Zero installation. Works in any modern browser.
• Client-side processing. Your PNG never leaves your device. If you are working with confidential assets — unreleased brand logos, client files, medical images — this matters.
• Fast for one-off conversions. Drop, convert, download. No learning curve.

For batch processing or fine-grained control over tracing parameters, Methods 2 and 3 give you more power.

Method 2 — Inkscape Trace Bitmap (GPL-2.0)

Inkscape 1.4 is the most capable free vector editor, and its Trace Bitmap feature gives you visual, real-time control over the tracing process. Inkscape is licensed under GPL-2.0 and runs on Windows, macOS, and Linux.

Step-by-Step

1. Open your PNG. Launch Inkscape 1.4 and go to File → Import (not Open — Import embeds the raster on the canvas). Select your PNG file.

2. Handle transparency. Inkscape imports the PNG with its alpha channel intact. If your PNG has a transparent background, the tracing algorithm sees transparency as "empty" and only traces the visible content — this is ideal for isolated logos and icons. If your PNG has a colored background you want to exclude, either remove it first (use Pixotter's background removal tool) or use Inkscape's "Remove background" option in the Trace Bitmap dialog.

3. Select the image. Click on the imported PNG so it shows selection handles.

4. Open Trace Bitmap. Go to Path → Trace Bitmap (or press Shift+Alt+B).

5. Choose a detection mode. Inkscape 1.4 offers several modes. The three most useful for PNG conversion:

   • Brightness Cutoff — converts the image to black and white at a brightness threshold (0.0 to 1.0). Pixels brighter than the threshold become white paths; darker pixels become black paths. Start at 0.450 and adjust. Best for: monochrome logos and text.

   • Edge Detection — traces outlines rather than filled regions. The threshold controls edge sensitivity (lower = more edges). Best for: wireframes, line art, and outline-only icons.

   • Color Quantization — groups pixels into a specified number of colors and traces each color region as a separate vector path. Set the color count to match your source (2-8 works well for flat-color graphics). Best for: multi-color logos and illustrations.

6. Tune the settings. Check Live Preview to see changes in real time:

   • Smooth — applies Gaussian blur before tracing. PNG files are lossless and generally artifact-free, so you can often leave this off (unlike JPG tracing where Smooth compensates for compression noise).
   • Remove background — eliminates the background color region. Useful when your PNG has a solid-color background instead of transparency.
   • Speckles — suppresses regions smaller than N pixels. Set to 2-4 for clean PNGs; increase to 8-10 if tracing a low-resolution source with anti-aliased edges.
   • Smooth corners — rounds jagged staircase artifacts. A value of 0.5-1.0 works for most graphics.

7. Apply. Click Apply. Inkscape generates the vector trace layered over the raster image.

8. Delete the original raster. Click away to deselect, then click the raster image underneath and press Delete. Only the vector trace remains.

9. Save as SVG. Go to File → Save As and choose Plain SVG (cleaner than Inkscape SVG for web use — it strips Inkscape-specific metadata).

PNG-Specific Advantages in Inkscape

PNG files trace noticeably better than JPG files in Inkscape because:

• No compression artifacts. JPG's lossy compression introduces blocky noise around edges that the tracer picks up as spurious paths. PNG is lossless, so edges are clean — resulting in fewer stray nodes and smoother curves.
• Alpha channel preservation. When you import a PNG with transparency, Inkscape respects the alpha channel during tracing. The tracer ignores fully transparent pixels, producing a vector that matches only the visible content. With a JPG, the "transparent" area is actually white pixels, and the tracer must guess where the subject ends and the background begins.
• Higher color fidelity. PNG supports up to 48-bit color depth. Flat-color regions in a PNG stay flat — they do not develop the subtle color banding that JPG compression introduces. This means Color Quantization mode works more reliably.

Method 3 — Potrace + ImageMagick Pipeline (GPL-2.0 / Apache 2.0)

Potrace 1.16 is the tracing engine behind Inkscape's Trace Bitmap. Running it from the command line gives you scriptable, automatable PNG-to-SVG conversion. Potrace is licensed under GPL-2.0. ImageMagick 7.1 (Apache 2.0) handles the format preprocessing.

Install

On Ubuntu/Debian:

sudo apt install potrace imagemagick

On macOS with Homebrew:

brew install potrace imagemagick

Verify versions:

potrace --version
# potrace 1.16

magick --version
# ImageMagick 7.1.x

Convert PNG to SVG

Potrace only accepts PBM, PGM, PPM, and BMP input. Use ImageMagick to preprocess your PNG:

# Step 1: Convert PNG to PGM (preserves grayscale information)
magick input.png -colorspace Gray input.pgm

# Step 2: Trace PGM to SVG
potrace input.pgm -s -o output.svg

Using PGM (grayscale) instead of PBM (pure black-and-white) preserves more tonal information, letting Potrace make better decisions about edge placement.

Handling Transparent PNGs

This is where PNG sources need special attention. Potrace does not understand alpha channels — it sees transparency as black (or white, depending on the conversion). To handle PNG transparency correctly:

# Flatten transparency onto a white background before tracing
magick input.png -background white -alpha remove -colorspace Gray input.pgm
potrace input.pgm -s -o output.svg

If your logo is dark on a transparent background, flattening onto white gives the best result. If your logo is light-colored, flatten onto black instead:

magick input.png -background black -alpha remove -colorspace Gray -negate input.pgm
potrace input.pgm -s -o output.svg

The -negate flag inverts the image so that Potrace traces the light content (now rendered dark against the white canvas after inversion).

Useful Potrace Options

Batch Conversion

Process an entire folder of PNGs:

for file in *.png; do
    magick "$file" -background white -alpha remove -colorspace Gray "${file%.png}.pgm"
    potrace "${file%.png}.pgm" -s -o "${file%.png}.svg"
    rm "${file%.png}.pgm"
done

This pipeline handles transparent PNGs correctly by flattening alpha onto white before tracing. If your PNGs have colored backgrounds, swap -alpha remove for -threshold 50% and adjust the percentage.

PNG vs SVG — Format Comparison

Before converting, make sure SVG is the right target format for your image.

The decision rule: if your image has clean lines and flat colors, SVG is almost certainly better. If it is a photograph or a complex illustration with gradients, textures, and millions of colors, keep it as a raster format (see What is PNG? for guidance on when PNG is the right choice and when WebP or AVIF compress better).

Tracing Quality Guide — What Works and What Doesn't

Tracing is reconstruction, not conversion. The algorithm approximates your pixel data as vector shapes. Some PNGs make that easy; others make it impossible.

Source Quality Matrix

When PNG Transparency Helps

A transparent-background PNG is the ideal tracing source for logos and icons. The alpha channel acts as a built-in mask: the tracer sees only the visible content and ignores everything else. No need to set threshold values or use "Remove background" — the subject is already isolated.

When PNG Transparency Hurts

Partial transparency causes problems. A PNG with drop shadows, soft glows, or glass-effect overlays contains pixels at every opacity level from 0% to 100%. The tracer must decide where "visible" ends and "invisible" begins. The result is usually messy — shadow regions become jagged shapes, soft glows become hard-edged blobs.

The fix: flatten the PNG before tracing. In ImageMagick:

# Flatten semi-transparent effects onto white
magick input.png -background white -alpha remove flattened.png

Then trace the flattened version. You lose the soft effects, but the core graphic traces cleanly. If you need the drop shadow in the final SVG, add it back with a CSS filter: drop-shadow() — it will look better than a traced approximation anyway.

Getting the Best Results From PNG Sources

1. Use the highest resolution available. A 1200x1200 PNG traces with smooth curves. A 64x64 PNG traces with jagged staircase edges. If you only have a small PNG, upscale it 2-4x with ImageMagick before tracing: magick small.png -resize 400% large.png
2. Keep transparency when you have it. Do not flatten a transparent PNG onto white "just in case." Let the tracer use the alpha channel — it produces tighter paths with fewer stray artifacts.
3. Flatten partial transparency. If the PNG has drop shadows, glows, or blurred edges, flatten those before tracing (see above).
4. Reduce colors for multi-color graphics. If the PNG has anti-aliased edges with dozens of intermediate colors, reduce to the core palette first: magick input.png -colors 6 reduced.png
5. Clean up after tracing. Even excellent traces benefit from 5 minutes of manual cleanup in Inkscape — deleting stray nodes, smoothing wobbles, and joining disconnected path fragments.

FAQ

Can I convert any PNG to SVG?

You can run any PNG through a tracer, but the result is only useful for graphics with clean edges and flat or limited colors — logos, icons, line art, and simple illustrations. Tracing a photograph produces a massive file with thousands of vector shapes that looks like a bad posterization filter. If your PNG is a photo, keep it as a raster format. For more on when each format makes sense, see SVG vs PNG: When to Use Each Format.

Does PNG transparency carry over to SVG?

Not directly. The tracer reads the alpha channel to determine which pixels are visible and traces only those regions. The resulting SVG has its own transparency — SVG backgrounds are transparent by default unless you explicitly add a background rectangle. So the practical effect is that a transparent-background PNG produces a transparent-background SVG, but the mechanism is different: PNG uses an alpha channel per pixel, while SVG simply has no background element.

How is converting PNG to SVG different from converting JPG to SVG?

PNG is a better starting point for tracing. JPG uses lossy compression that introduces blocky artifacts around edges — the tracer picks these up as real features and produces messier output. PNG is lossless, so edges stay clean. PNG also supports transparency, letting you skip the background removal step entirely for logos and icons on transparent backgrounds. If you have the same graphic as both JPG and PNG, always trace the PNG. (For the JPG workflow, see How to Convert JPG to SVG.)

What about converting SVG back to PNG?

That is a much simpler operation — rasterizing vector paths into pixels is deterministic and lossless (at any given resolution). Every method that converts PNG to SVG can also go the other direction. See How to Convert SVG to PNG for five methods including browser DevTools, Inkscape, and ImageMagick.

Will the SVG file be smaller than the PNG?

For simple graphics (logos, icons, line art), yes — often dramatically smaller. A flat-color logo might go from 40 KB as PNG to 3 KB as SVG. For complex images with many traced paths, the SVG can be larger than the PNG. The rule of thumb: fewer colors and cleaner edges mean smaller SVGs.

Can I edit the SVG after conversion?

Yes, and that is one of the main reasons to convert. Open the SVG in Inkscape 1.4, Figma, Adobe Illustrator, or a text editor. Move paths, change colors, delete elements, adjust curves, resize without quality loss. You can also style inline SVGs with CSS and manipulate them with JavaScript — capabilities that are impossible with PNG.

Which method should I use?

• Pixotter for quick, private, one-off conversions with no software installation.
• Inkscape 1.4 (GPL-2.0) for visual control, live preview, and detailed per-image tuning. Best for important brand assets.
• Potrace 1.16 (GPL-2.0) + ImageMagick 7.1 (Apache 2.0) for batch processing, CI/CD pipelines, and scripted automation. Best for converting folders of icons in one command.