Converting a PNG to SVG means tracing it. A vector editor or online tool reads the pixels and redraws the shapes as paths, which is why logos, icons and line art can scale to any size without going soft.
Illustrator, Inkscape and VTracer trace on their own, and a pen tool does the same job by hand. Designers mostly use it to rescue old logos. Web teams use it to turn icon sets into scalable assets.
Renaming the file won’t work, and not every converter traces anything. The W3C’s SVG 2 specification (Candidate Recommendation Snapshot, October 2026) allows SVG to hold raster content, so some tools hand back an SVG that only wraps the original PNG. Zoom in and it blurs exactly like before.
What PNG to SVG conversion actually does
Tracing swaps a grid of pixels for paths and fills. The graphic then scales to any size and stays editable.
It’s nothing like changing PNG to JPG. A tracer has to look at the pixels and decide where each shape starts and stops.
What comes out is an SVG file, a text description of shapes and not a picture with a new extension.
When a tool says it converts your PNG, it’s usually doing one of a few things. Auto-trace software (Illustrator, Inkscape, VTracer) detects edges and colors, then fits curves to them. Some people skip the software and draw over the PNG with a pen tool. And some converters just tuck the PNG inside an SVG as a Base64 data URI, so nothing gets vectorized at all.
That last one is still valid SVG. The W3C’s SVG 2 specification describes the format as an XML language for two-dimensional graphics, covering pure vector content and mixed vector and raster content.
The mixed mode is why some converters return a file that still blurs when you zoom in.
Scaling isn’t the only difference between the formats, and the guide on how SVG and PNG differ lays out the rest.
A good trace gives you sharp edges at any size and shapes you can recolor. It can’t add detail the PNG never held, so a blurry source stays blurry.
Which PNG files convert well to SVG?
Hard edges and a clean background are what a tracer wants. Flat-color logos, icons, line art and simple illustrations convert well. Photographs, soft shadows and gradients don’t.
Potrace’s documentation names company and university logos and handwritten notes as the typical inputs for tracing.
Clean traces usually come from logos with a handful of solid colors, icons and pictograms, black ink line art and signatures, and flat illustrations with no texture.
Poor traces come from photographs, drop shadows, glows, smooth gradients, and low-resolution screenshots of text.
Tools will still try. VTracer and Illustrator’s High Fidelity Photo preset both accept photos, but you get a pile of layered color regions instead of a clean drawing.
A few minutes of prep helps before you trace:
- Use the largest version of the PNG you have. Tracing follows pixels, so a small source gives wobbly curves.
- Crop tight to the artwork.
- Raise the contrast if you’re going for a black-and-white trace.
- Remove the background when you don’t want it showing up as a shape.
Transparency needs a check. Adobe’s Image Trace help (updated February 2026) gives built-in transparency support to the enhanced High Fidelity Photo, Low Fidelity Photo, 6 Colors and 16 Colors presets.
With any other preset or tool, view the result on a colored canvas and look for a stray background shape.
If you can name every color and every shape in the image, trace it. If you can’t, ask whoever made it for the original vector file.
How the main PNG to SVG methods compare
Most jobs get done with desktop auto-trace, an online converter, a command-line tool or library, or a manual redraw. The table puts them side by side.
| Method | Example tools | Best for | Main limit |
|---|---|---|---|
| Desktop auto-trace | Illustrator, Inkscape, CorelDRAW | Logos and icons you will keep editing | Settings need tuning per image |
| Online converter | Vectorizer.AI, Vector Magic, Adobe Express | One-off color logos | Upload required, plan limits |
| Command line or library | Potrace, VTracer | Batches and scripts | Setup and flag tuning |
| Manual redraw | Bezier pen in Inkscape or Illustrator | Simple line art, text-heavy logos | Slowest method |
As of October 2026, Vector Magic wants a subscription before you can download from its Online Edition. You can also buy the Desktop Edition and work offline.
Vectorizer.AI sells unlimited Web App plans and usage-based API plans, according to its pricing page. Adobe says its free Express converter is powered by Illustrator.
Vector Magic’s Desktop Edition caps image size at 20 megapixels on Windows and 5 on Mac, per the vendor’s desktop page.
Free beats paid more often than most roundups admit. Potrace’s own page notes that, unlike Potrace, Vector Magic works for color images, but VTracer is MIT-licensed and takes color PNG input directly.
For a flat-color logo, try VTracer or Inkscape’s Multiple scans mode before you pay anyone.
A manual redraw only makes sense for small, simple artwork. If a messy trace would take longer to clean up than making SVG files from scratch over the PNG, draw it.
How to convert PNG to SVG in Adobe Illustrator
Place the PNG, run Image Trace with a preset, expand the result and save as SVG.
- Open the PNG with File > Open, or use File > Place to bring it into an existing document.
- Select the image and open Window > Image Trace.
- Pick a preset. Black and White Logo suits flat logos, while 6 Colors and 16 Colors suit color artwork.
- Turn on Preview and adjust the sliders until the edges look right.
- Read the Paths, Anchors and Colors counts in the panel. Lower counts mean a lighter file.
- Click Expand to convert the trace into editable paths.
- Ungroup, delete the background shape and stray specks, then choose File > Save As and select SVG.
Adobe’s panel help (page updated February 2026) defines the controls worth knowing. Threshold sets the black and white cutoff when the mode is Black and White. Paths trades smoothness against accuracy, and moving the slider right adds detail, though Adobe warns the paths get bumpier. A higher Corners value turns more sharp bends into corner points. A higher Noise value gives less noise, meaning fewer tiny specks.
The panel also switches between enhanced and legacy preset versions. As of that help page, auto grouping comes with the enhanced presets, so use them unless you need the old behavior.
Watch the anchor count before you hit Expand. Tight settings on a large PNG produce a heavy file.
How to convert PNG to SVG in Inkscape
Inkscape traces a PNG through Path > Trace Bitmap (Shift+Alt+B), using an engine derived from Peter Selinger’s Potrace library.
The tracing tutorial on the Inkscape site is blunt about what you get. A tracer hands you curves to work from, not an exact copy and not a finished product.
Single scan builds one filled path from a black and white version of the image. Potrace gets its input from Brightness Cutoff, Edge Detection or Color Quantization, while the Autotrace and Centerline options use a different algorithm.
Multiple scans gives a more detailed result but creates a separate object for each scan or color, per the Inkscape manual. After ungrouping, the stacked scans can be moved apart.
Since Inkscape 1.0, a single Trace Bitmap dialog also includes the former Trace Pixel Art dialog and adds a centerline tracing option, according to the project’s release notes.
- Import the PNG with File > Import, or open it directly.
- Select the image on the canvas.
- Open Path > Trace Bitmap. A live preview appears in the dialog.
- For a black-and-white logo, choose Single scan with Brightness Cutoff. For color artwork, choose Multiple scans.
- Set the threshold. In Brightness Cutoff it runs from 0.0 to 1.0, and a higher value darkens the intermediate bitmap.
- Click Apply, drag the traced shape off the original, and delete the PNG.
- Press Ctrl+L (Path > Simplify) to cut the node count.
- Save as Plain SVG, which drops Inkscape’s editing metadata.
More dark pixels in the intermediate bitmap means more tracing, more CPU time and a larger path.
Detailed images trace roughly. The tutorial’s own example, a guitar player, comes out with an enormous number of nodes until Simplify is applied.
When even the simplified output stays messy, trace by hand with the Bezier pen over a dimmed copy of the PNG. From there the shapes are ordinary paths, and the steps for editing SVG files apply.
Converting PNG to SVG online or from the command line
Online tools suit one-off files, and the command line suits batches. What matters more than that split is where the tracing runs, on someone else’s server or in your own browser.
Online converters
Anything that uploads your PNG sends a copy of the artwork to a third party. Unreleased logos and client files belong in a tool that traces locally.
CloudConvert traces server-side and offers presets for line art, posters and photos, smooth or polygon curves, speckle removal and path simplification. Its PNG to SVG page promises no watermarks and no sign-up.
SVGcode is Thomas Steiner’s open-source tracer, built on Potrace compiled to WebAssembly, so the conversion runs in the browser. It traces in color and passes the result through SVGO.
SVGcode is built as a progressive web app and is also listed in the Microsoft Store.
Its GPL-2.0 license comes from Potrace, according to the project’s README.
Command line and scripting
Potrace is the classic route, and it doesn’t read PNG. Its documentation lists PBM, PGM, PPM and BMP as inputs, so the file needs converting first.
- Convert the PNG to PNM or BMP, for example with ImageMagick.
- Run mkbitmap to filter, scale and threshold the image into a bilevel bitmap.
- Run potrace with the SVG backend:
potrace logo.pbm -s -o logo.svg
The mkbitmap man page (version 1.16) recommends a scale factor of 2. At 3 or higher, interpolation starts to invent detail that was never in the image.
VTracer skips the pre-processing because it takes color PNG directly. From the command line it’s vtracer input.png output.svg, with --preset bw for black and white line art. In Python, run pip install vtracer==1.0.0a3 and then vtracer.convert_file("in.png", "out.svg"). Node.js gets @visioncortex/vtracer, a WebAssembly build with no native dependency.
As of the 1.0.0-alpha.3 release, the 1.0 line is still tagged alpha on PyPI and npm. Pin the version in any script you plan to keep.
VisionCortex designed VTracer for high-resolution scans of historic blueprints, up to gigapixels. It replaces Potrace’s optimal-polygon search with a linear pipeline, which is why large files stay workable.
Looping over a folder takes one line of shell. A single setting for the whole folder works for icons drawn in one style and falls apart on mixed artwork, so spot-check a few outputs before you trust the batch.
Autotrace is the older alternative. Potrace’s own page says Autotrace reads many more file formats, while rating Potrace’s output as the nicer one. That’s the maintainer’s opinion, not a benchmark.
Which trace settings change the result?
Light and dark cutoff, color count, speckle removal and curve smoothing do most of the work. Every tool names them differently.
| Control | Illustrator | Inkscape | VTracer |
|---|---|---|---|
| Light and dark cutoff | Threshold | Brightness cutoff | –threshold |
| Color count | Colors slider | Number of scans | –max-colors |
| Speckle removal | Noise | Suppress speckles | –filter-speckle |
| Curve smoothing | Paths, Corners | Smooth corners, Optimize paths | –simplify, curve mode |
Potrace’s own flags are the original versions of these controls. In its usage text, -t suppresses speckles up to a set size (default 2), -a sets the corner threshold (default 1) and -O sets the curve optimization tolerance (default 0.2).
Specks in the output mean the speckle control needs raising. VTracer’s –filter-speckle accepts 0 to 128 as of the 1.0.0-alpha.1 release, up from a cap of 16.
Wobbly edges on hard-edged art usually go away if you switch VTracer from spline to polygon mode, or pick polygon curves in CloudConvert. Straight segments stay straight.
Banded color is the opposite problem. Lower VTracer’s gradient step, which sets the color difference between gradient layers, or raise the color count. Both add shapes, so file size climbs.
Change one control per trace. Stop when the edges look right at the size the artwork will actually appear.
When PNG to SVG conversion fails
Complex images, tiny sources, live text and bitmap-wrapping converters are where it goes wrong. The file looks fine at first, then falls apart at size, in an editor or on the page.
Photographs and soft gradients are the biggest offenders. web.dev’s image guidance says a highly complex image can mean a verbose set of SVG instructions and a large transfer size, and that raster images are the right tool for artwork with real-world levels of detail.
Small or blurry PNGs fail differently, because the tracer fits curves to the blur. Upscaling first adds invented detail, not real detail.
Lettering gets worse treatment. Traced letters become outline paths, so they can’t be searched, selected or restyled as type. When you know the typeface, retype the words as real SVG text instead of tracing them. Small traced lettering also comes out wobbly.
Then there are the wrapped bitmaps. Some converters return an SVG that embeds the PNG as a data URI, and nothing was traced.
To catch one, open the file in a text editor and search for an image element or data:image/png. If either appears, the file is the PNG plus markup and it won’t scale cleanly.
Sources disagree on file size. Many converter pages say SVG always comes out smaller, while web.dev says SVG is compact for simple shapes and a highly complex image can mean verbose markup and a large transfer size.
Both hold. File size follows shape count, not format, which is why a flat logo shrinks and a traced photo balloons.
The tracer matters too. VTracer’s README claims more compact output than Illustrator’s Image Trace because it stacks shapes and avoids holes. That’s the project’s own claim, so test it on your artwork before switching tools.
When tracing keeps failing, redraw the artwork by hand, ask for the original vector file, or keep the raster, which web.dev calls the right tool for artwork with real-world levels of detail.
How to clean up and check the finished SVG
Delete stray shapes, simplify the paths, run the file through SVGO, then test it in a browser and an editor.
Start by looking for leftovers:
- A background rectangle left behind by the trace
- Specks and one-pixel islands
- Near-identical colors that should be a single fill
- Paths carrying far more nodes than the shape needs
Curve simplification pays off. VTracer’s –simplify option re-fits smooth runs with the fewest cubic curves that stay within a pixel tolerance, and its README says this typically halves file size.
SVGO strips editor metadata, comments, hidden elements and default values without changing how the file renders, according to its documentation. It runs on Node.js and installs with npm install -g svgo, and SVGOMG wraps the same engine in a web page.
One dated change matters here. As of SVGO v4, removeViewBox and removeTitle are no longer in the default preset, to preserve scalability and accessibility.
Tools that wrap SVGO can ship different defaults, so confirm the output still carries its viewBox. Without it the graphic stops scaling to its container, and the wider routine of SVG optimization covers what else to review.
Then test the file where it will actually live:
- Open it in a browser and zoom well past the intended size. Edges should stay crisp.
- Place it on a colored canvas to expose any leftover background shape.
- Import it into Figma, Illustrator or Inkscape and select a few shapes to confirm the paths are editable.
- Compare the colors against the PNG.
How you place the file changes what you see. An img tag renders it as a picture, while inlining it with SVG in HTML markup lets CSS style individual paths.
For cutting machines and print, open the file at final size and look for hairline gaps. VTracer’s default stacked mode layers shapes over each other, which looks right on screen, while its cutout mode produces separate gapless shapes.
PNG to SVG Conversion FAQ
Can Photoshop, Canva, Figma or GIMP convert PNG to SVG?
Not as a true conversion. Exporting a PNG as SVG from a raster or design app usually embeds the bitmap instead of tracing it, so the result still blurs when enlarged.
Trace in Illustrator, Inkscape or VTracer first. After that you can edit the SVG in any of those apps.
Do AI vectorizers fix a low-resolution PNG?
No. An AI vectorizer still outputs traced paths, so it smooths edges and fits shapes but cannot recover detail the pixels never held.
An upscaler guesses that detail, and the SVG can look sharper without matching the original.
How do I convert a PNG to SVG for Cricut?
Trace the PNG first, then upload the SVG to Design Space.
Cricut’s Help Center (edited March 2026) lists SVG and DXF as vector images that upload as designed, and says an SVG’s cut paths are already defined, while a PNG goes through the basic image flow with a cleanup step.
Can an SVG be converted back to PNG?
Yes. Rendering vector shapes to pixels is the easy direction, and Inkscape exports PNG at 96 dpi by default with a settable resolution.
A traced SVG returns the traced approximation, not the original PNG. The steps for converting SVG to PNG are covered separately.
Which File Becomes the Master After Tracing?
The traced SVG becomes the working master, and the original PNG stays archived and untouched as the reference. Every PNG to SVG conversion is an approximation, so the PNG remains the only record of the true pixels.
Handle the files in this order:
- Archive the PNG unchanged
- Edit only the SVG from then on
- Render new PNG copies from the SVG
The order protects the one file that can’t be rebuilt. A re-trace with different settings needs the PNG, and tracers change between versions. VTracer’s release notes record boundary fixes that alter how soft edges trace.
The trade-off is two files to track instead of one, plus an SVG that differs slightly from the PNG at pixel level.
Before publishing, add a text alternative, because traced paths carry no readable text. The guide to accessible SVG files explains how.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
