How to Convert PNG to SVG: Trace, Redraw or Keep It

How to Convert PNG to SVG: Trace, Redraw or Keep It

To convert a PNG to a real SVG you have to trace it: software finds the edges of each colour area and writes them out as paths. Inkscape's Trace Bitmap (Shift+Alt+B), potrace and VTracer all do this for free. It works well on flat logos and line art, poorly on photos and screenshots, and renaming the file or wrapping it in an SVG tag does neither.

Most "PNG to SVG converter" pages skip that distinction, and it is the one that decides whether the result is any use. (Which vector format to send once you have real paths is a separate question, covered in our AI, EPS, SVG and PDF guide.) We ran both kinds of conversion on test images made for this article and measured the output. A 26,083 byte logo PNG wrapped in an SVG became a 34,936 byte file that was still a bitmap. The same logo traced with potrace, one colour layer at a time, became 984 bytes of real paths that stayed sharp at four times the size.

Wrapping a PNG in SVG is not vectorizing

There are three things people do when asked for "an SVG version" of a PNG, and only one of them produces vector artwork.

Renaming the file. Changing logo.png to logo.svg changes nothing inside the file. It is still PNG data, and anything that opens it as SVG expects XML text and finds binary bytes instead. When we renamed our test PNG to .svg and gave it to librsvg's rsvg-convert, it stopped at the first byte with an XML parse error ("Start tag expected, '<' not found"). Programs that sniff the real format may show the bitmap instead, but either way there are no vectors.

Embedding the PNG. Some converters put the original pixels inside an SVG image element. The SVG <image> element "includes images inside SVG documents" and "can display raster image files or other SVG files", and the only formats SVG software must support there are JPEG, PNG and other SVG files, according to MDN. The pixels travel as a base64 data URL in the href attribute. The file now has an .svg extension and opens in a vector editor, but there are no paths in it: zoom in and you see the same pixel grid, softened by whatever resampling the viewer applies.

Tracing. A tracer looks at the pixels, decides where one region ends and the next begins, and fits straight lines and Bézier curves along those boundaries. The output is a set of path elements with fill colours. The pixels are gone. What you get back is an approximation of the shapes, and the quality of the approximation depends on how clean the source was.

What base64 costs: the bytes, measured

Base64 turns binary into text by mapping each 6 bits to one character, so "three 8-bit bytes ... can be represented by four 6-bit Base64 digits", and MDN's glossary puts the result at "roughly a third larger than its source". We checked that on two files generated for this article, wrapping each one in a minimal SVG with a 512 by 512 viewBox and a single image element.

Measured here on 2026-11-13 with Python's base64 and gzip modules (level 9). The 34,780 figure is exactly 4 × ⌈26,083 ÷ 3⌉ = 4 × 8,695, the arithmetic MDN describes. The extra 156 bytes in the wrapped file are the svg and image tags.

Two things follow from the table. First, the wrapped file is about 34 percent larger on disk than the PNG it contains, and it is no sharper. Second, gzip claws most of that back: compressed, the wrapped logo was 25,787 bytes against 25,086 for the compressed PNG. So the transfer cost of a wrapped SVG served with compression is small. The real cost is that you asked for vector artwork and received a bitmap with a different label. A printer, a laser cutter, a vinyl plotter or a font tool that needs outlines will reject it or trace it themselves, and a viewer scaling it up shows blurred edges. Our SVG optimization guide calls this the "photo in a wrapper" case, and it is the first thing to check when someone hands you an SVG that seems strangely heavy.

How to tell which kind of SVG you have

Open the file in a text editor and search for two strings:

1. "data:image/png;base64" or "data:image/jpeg;base64" inside an image element means embedded pixels. If that is the only drawing content, the file is a wrapped bitmap.
2. "<path" with long d attributes full of numbers, letters like M, C, L and Z, and fill colours means traced or drawn vectors.

A file can contain both, for example a traced logo sitting on a photo background. In a vector editor, switch to an outline or wireframe view. Paths show as thin outlines; an embedded image shows as a single rectangle.

The free tracing tools and what each one is for

Three free tracers cover nearly every case. They differ in what they accept, how they handle colour, and how much control they give you.

Sources: the Inkscape tracing tutorial and the Inkscape Beginners' Guide 1.3, the potrace home page, man page and FAQ, and the VTracer README and LICENSE file, all checked 2026-11-13.

Inkscape Trace Bitmap

Inkscape is the route most people should try first, because it opens a PNG directly and shows a preview. Import the PNG, select it, and open Path, Trace Bitmap (Shift+Alt+B). The Inkscape tutorial says the tracer is "derived from the original Potrace library by Peter Selinger", which is why its single-colour results look like potrace output.

The Beginners' Guide for Inkscape 1.3 lists these single scan modes:

• Brightness cutoff. Each pixel's brightness decides whether it counts as black or white. The guide calls it "ideal to vectorize dark silhouettes in front of a bright background", which describes most one-colour logos, stamps and signatures.
• Edge detection. Uses "the edge detection algorithm devised by J. Canny", per the tutorial, so it outlines the boundaries between areas rather than filling them. Useful for drawings you plan to colour yourself.
• Color quantization. Finds "edges where colors change, even at equal brightness and contrast". Use it when two colours in the art have similar lightness, a red and a green for example, which brightness cutoff would merge.
• Autotrace and Centerline tracing (autotrace). A different algorithm; centerline tracing produces "strokes that are easy to modify instead of filled areas". This is the mode for technical line drawings and handwriting you want as single strokes rather than outlined shapes.

Multiple scans gives "a more detailed result" but "will create a separate object for each scan", and the guide's example uses a Colors option with 10 scans. That is how Inkscape gets colour out of a two-value tracer: it splits the image into bands of colour and traces each band as its own layer. The guide is also frank about expectations: "If you expect a 100% faithful representation of your picture, though, only in vector format, you will be disappointed." The tutorial says the same thing differently: "the Tracer's purpose is not to reproduce an exact duplicate of the original image."

After tracing, the new paths sit on top of the original bitmap. Move them aside, delete the bitmap, and check the result in outline view before saving.

potrace on the command line

potrace is the engine underneath, and running it directly gives exact control. Its home page describes the job plainly: it transforms "a bitmap into a smooth, scalable image", and "a typical use is to create SVG or PDF files from scanned data, such as company or university logos, handwritten notes, etc."

Two limits shape every potrace workflow:

• It does not read PNG. The FAQ explains this is deliberate, to keep the program to one job, and points to converters. Inputs are PBM, PGM, PPM or BMP. ImageMagick's convert, GIMP, or a two-line script will turn a PNG into a PBM.
• It only knows two colours. The FAQ's short answer to "Can Potrace handle color images?" is "no". Grey and colour pixels are thresholded to black or white first, and the man page calls its own greymap conversion "very crude", recommending the bundled mkbitmap tool for better thresholding.

The options that matter for most logos are these, as the man page defines them:

A typical run for a one-colour logo looks like this:

# PNG to 1-bit PBM first (ImageMagick 6), then trace
convert logo.png -threshold 50% logo.pbm
potrace -s -r 96 -t 4 -o logo.svg logo.pbm

The 72 dpi surprise in potrace SVGs

The -r 96 in that command fixes something that confuses people the first time. potrace's SVG backend is "dimension-based", and the man page notes that "unless the -r option is given, the resolution of the input bitmap is assumed to be 72dpi." Its SVG output therefore declares its size in points. Our 512 pixel test logo came out with width="512.000000pt".

In CSS, 1pt is 1/72 inch and 1px is 1/96 inch (MDN, length type), so 512pt is 512 × 96 ÷ 72 = 682.67 CSS pixels. Drop that file into a page or a design tool and it arrives a third larger than the PNG. With -r 96 our output declared width="384.000000pt", and 384 × 96 ÷ 72 = 512, the size you expect. You can also delete the width and height attributes and keep only the viewBox, then size the SVG in CSS. If unit conversions are where your layouts keep going wrong, our px, rem and em guide covers the CSS side.

VTracer for colour images

VTracer is the free option built for colour. Its README says it can "convert raster images (like jpg & png) into vector graphics (svg)" and that, compared with potrace, it "has an image processing pipeline which can handle colored images." It groups similar colours into regions, traces each region, and by default stacks the shapes rather than cutting holes in them.

The current README describes a 1.0 alpha command-line tool with presets (bw, poster, photo), curve modes (pixel, polygon, spline), --filter-speckle, --color-precision, a fixed --palette option and --simplify. We ran the version published on PyPI on the day of writing (package 0.6.15; the SVG comment it writes says 0.6.12), whose Python function takes mode, filter_speckle, color_precision and layer_difference arguments. Option names differ between versions, so check the help output of the build you install.

What we measured on test images

None of the numbers below come from a vendor. We generated four test images in Python, traced them with potrace 1.16 and VTracer, rendered every SVG back to pixels with librsvg's rsvg-convert, and compared the render with the source. All runs were on 2026-11-13.

The test images:

• Logo: a navy ring with an orange triangle inside, drawn at 2048 × 2048 and downsampled to 512 × 512 with antialiasing (26,083 bytes as PNG). The 2048 drawing was kept as a reference for the scaling test.
• Signature: a 1200 × 400 greyscale scrawl and underline with 400 random dust specks of 1 to 4 pixels (5,940 bytes as PNG).
• Photo-like: 220 random coloured blobs, blurred and noised, 512 × 512 (427,879 bytes as PNG), plus a smooth gradient version.
• Screenshot: an 800 × 300 fake settings panel with a nav bar, eight lines of text and a button (31,420 bytes as PNG).

The logo: one pass loses colour, layers keep it

The single potrace pass is accurate as a shape: 0.147 percent of pixels differ from the thresholded input, almost all of them on antialiased edges. But it is one colour. The orange triangle is dark enough to fall below the 50 percent threshold, so it came out black along with the ring.

The fix is the one the potrace FAQ suggests: "extract individual color components from your image ..., trace them separately, and then overlay the pieces." We made one mask per colour, traced each with its own -C colour, and pasted the two groups into one SVG. The result was 984 bytes, smaller than any single VTracer run, and closest to the source. This is also what Inkscape's Multiple scans does for you, one object per colour band.

The -a and -O rows show the trade-off the man page describes. Setting alphamax to 0 turns every curve into straight segments: more accurate on our pixel grid, but two thirds more bytes, and the circles become many-sided polygons. Raising opttolerance to 1 merged more segments and saved a quarter of the bytes for a small loss of accuracy. Turning curve joining off with -n more than doubled the file for no accuracy gain.

The point of vectors: scaling the logo up four times

The reason to vectorize is to get clean edges at any size, so we rendered each logo file at 2048 × 2048 and compared it with the original 2048 drawing. The measure is the share of pixels off by 64 or more grey levels, which in practice means visibly wrong edge pixels.

The wrapped PNG did worst, as expected: its edges are 512 pixel edges blown up four times. The layered potrace trace had fewer than half as many bad pixels, in a file one thirty-fifth the size. The VTracer spline result was no better than the bitmap at this size on our test. The file held five shapes for a three-colour logo, including a near-white second layer and a sliver in an in-between navy (#213060), where VTracer had found intermediate edge colours and traced them as their own regions. On artwork with antialiasing, reduce the colours before tracing, or with the 1.0 tool, give it a fixed palette.

The signature: speckle filtering is the whole job

The signature itself is two strokes. Everything else in the default trace is scanner dust, each speck faithfully turned into a tiny filled shape. Raising turdsize to 25 removed every speck up to 25 pixels in area and cut the file by 87 percent. The only risk is real detail of similar size: the dot of an i or a full stop in handwriting can be 20 pixels at scan resolution, so check those after a high -t value. A cleaner scan helps more than any setting; the potrace FAQ suggests scanning in greyscale at higher resolution and thresholding with mkbitmap.

The photo and the screenshot: tracing makes them worse

A photo has no edges in the sense a logo does. The tracer either follows every patch of noise, which turned a 428 KB PNG into a 3.6 MB SVG that still looked smeared, or it throws detail away until the file is small and no longer resembles the photo. On the smooth gradient, VTracer's default settings merged the whole image into one flat-coloured rectangle of 392 bytes. There is no setting between those extremes that gives you a sharp, small, faithful photo, because the information that makes a photo look like a photo is the fine variation a tracer is built to remove.

The screenshot shows a different failure. The SVG was 5.6 times the PNG, and every letter became an outlined shape: the text is no longer text, it cannot be selected or read by a screen reader, and small type picks up wobbly edges. A screenshot belongs in PNG or WebP. Our image format guide covers which raster format fits.

Trace, redraw or keep the PNG: a decision table by image type

The rule underneath the table: trace when the image is made of a few flat areas with hard edges, redraw when the image matters enough that its curves should be intentional, and keep the raster when the image is made of continuous tone or text.

Redraw is cheaper than it sounds for simple marks

A two-colour logo made of a circle, a ring and a triangle, like our test image, takes minutes to redraw with an editor's shape tools, and the result is better than any trace: true circles, exact symmetry, a handful of nodes. Our potrace output for the same ring needed curve segments approximating each circle. They render almost identically, but if you later want to adjust stroke width or align the triangle to the exact centre, drawn primitives are far easier to edit than traced outlines.

A practical approach is to trace first and use the trace as a guide layer. Lock it at low opacity, redraw on top with real shapes, then delete the trace. For type in a logo, identify the font and set the words as real text before converting to outlines, rather than tracing letters. Check the font licence first. The vector formats guide linked above explains when to outline text and what each export loses.

A clean PNG to SVG workflow, step by step

1. Look for the original first. If the logo came from a designer, an AI, EPS, PDF or SVG master almost certainly exists. A PDF from a print shop often contains the vector artwork intact. Ten minutes of asking beats an hour of tracing.
2. Check the source size. Trace from the largest copy you have. If it is under about 200 pixels across, plan to redraw.
3. Clean the raster. Crop, remove the background, raise contrast. For multi-colour art, reduce the image to its real colours (for our three-colour logo, navy, orange and white) so antialiased edge pixels do not become their own regions.
4. Trace. Inkscape: Path, Trace Bitmap, pick Brightness cutoff for one colour or Multiple scans with Colors for several. potrace: convert to PBM, run with -s -r 96 and a -t value that fits the noise. VTracer: start from its defaults or a preset, then lower the colour count.
5. Inspect in outline view. Look for stray specks, doubled edges, and shapes that should be one piece but came out as several.
6. Compare at large size. Render or zoom to four times the intended size and check corners, curves and thin parts against the source.
7. Remove the bitmap. Make sure the original image is not still inside the file. Search the saved SVG for "base64".
8. Tidy and save. Set a viewBox, remove fixed width and height if the SVG will be sized by CSS, and run a conservative SVG optimizer. The safe optimization pass for icons and illustrations lists the settings that do not break shapes.

Faults to look for in a traced file

• The source bitmap left inside. The trace looks right because the original is sitting underneath it. The file size gives it away.
• Thousands of nodes on a simple shape. A trace with curve joining turned off or a very low tolerance. Raise opttolerance in potrace or simplify the paths in your editor.
• White shapes that are not really white. potrace leaves interior white areas transparent by default; the --opaque option fills them. On a dark background a "white" letter counter becomes a hole. Decide which you want.
• Wrong size on import. The 72 dpi points issue above. Check width, height and viewBox.
• Colour drift. Traced colours are averages of antialiased pixels, so the navy in the SVG may be a few values off the brand navy. Replace fills with exact brand values.

Who owns the SVG you traced

Tracing changes a file's format, not who holds the rights to the image. Converting someone else's logo or illustration into paths does not give you a new work to use freely, and a traced copy of a photograph carries the photographer's rights with it. The legal side, including what the US Copyright Office says about changes of medium and what a tracing case decided, is in our guide to whether tracing a photo is copyright infringement. For vectors you download rather than make, our free vector graphics guide covers how to read the licence.

For your own logo, or a client's logo with their go-ahead, tracing is ordinary production work. Keep the source PNG and a note of the tool and settings you used with the SVG, so the next person knows the file is a trace and not the original master.

PNG to SVG questions

Can I convert a PNG to SVG online for free?

Yes, but check what the converter actually does. Some trace the image into paths; others embed the PNG inside an SVG image element, which gives you a larger file that is still a bitmap. Open the result in a text editor: if you see "data:image/png;base64", it was wrapped, not traced. Inkscape, potrace and VTracer are free and run locally, so your file is not uploaded anywhere.

Why is my converted SVG bigger than the PNG?

Either it is a wrapped bitmap, which base64 makes about a third larger (34,936 bytes against 26,083 in our test), or the tracer followed noise and texture. Our photo-like image went from 428 KB as PNG to 3.6 MB as a traced SVG. Large traced files usually mean the image was not suited to tracing, or the speckle and colour settings were too fine.

Will tracing make a blurry logo sharp?

It makes the edges crisp, but not correct. A tracer has to guess where a blurred edge lies, and it fits curves to that guess. Corners round off, thin lines thicken or break, and small text turns into blobs. For a logo under about 200 pixels, or one saved as a low-quality JPEG, redrawing or finding the original file gives a better result.

Which free tracer is best for colour images?

For a few flat colours, Inkscape's Multiple scans or potrace run once per colour gave the cleanest and smallest result in our tests: 984 bytes for a two-colour logo. VTracer handles colour in one step and is faster for complex illustrations, but on antialiased art it can create thin extra shapes along edges, so reduce the palette first.

Does potrace accept PNG files?

No. potrace reads PBM, PGM, PPM and BMP. Its FAQ says this is deliberate and points to tools such as ImageMagick or GIMP for converting PNG first. Inkscape includes a tracer derived from potrace and opens PNG directly, which is the easier route if you prefer not to use a command line.

Why does my potrace SVG appear too large when I import it?

potrace assumes 72 dpi and writes the SVG size in points, so a 512 pixel image becomes 512pt wide, which is 682.67 CSS pixels. Run potrace with -r 96 to get a file that matches the pixel size, or remove the width and height attributes and keep the viewBox.

Should I use a traced SVG as a favicon or app icon?

You can, but traced paths rarely line up with the pixel grid, so they blur at 16 to 32 pixels. For icons, redraw on a grid or at least simplify and align the trace. You will also still need raster versions; our favicon sizes guide explains which files Google Search accepts and why SVG alone is not enough there.

Sources

• MDN Web Docs, <image> SVG element (mdn/content source), https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image: what the element does, required JPEG, PNG and SVG support, href attribute. Checked November 13, 2026.
• MDN Web Docs, "data: URLs" (mdn/content source), https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data: data URL syntax and the base64 token. Checked November 13, 2026.
• MDN Web Docs, Glossary, "Base64" (mdn/content source), https://developer.mozilla.org/en-US/docs/Glossary/Base64: three bytes as four characters, roughly a third larger, RFC 4648 alphabet. Checked November 13, 2026.
• MDN Web Docs, <length> CSS type (mdn/content source), https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length: 1px = 1in / 96, 1pt = 1in / 72. Checked November 13, 2026.
• Inkscape, "Tracing bitmaps" tutorial, https://inkscape.org/doc/tutorials/tracing/tutorial-tracing.html: Trace Bitmap shortcut, derivation from Potrace, Canny edge detection, colour quantization, autotrace and centerline modes, purpose statement. Checked November 13, 2026.
• Inkscape Beginners' Guide 1.3, "Tracing an Image", https://inkscape-manuals.readthedocs.io/en/latest/tracing-an-image.html: single scan mode names, Multiple scans with Colors, brightness cutoff advice, fidelity warning. Checked November 13, 2026.
• Potrace home page, https://potrace.sourceforge.net/: description, input formats, typical uses, release 1.16, Inkscape integration, Potrace Professional licensing. Checked November 13, 2026.
• potrace(1) man page, https://potrace.sourceforge.net/potrace.1.html: two-colour input, SVG backend and 72 dpi default, -t, -a, -O, -n, -u, -r, -C, --opaque, --flat, greymap conversion and mkbitmap, GPL terms. Checked November 13, 2026.
• Potrace FAQ, https://potrace.sourceforge.net/faq.html: no PNG support and why, no colour support and the per-colour workaround, scanning advice. Checked November 13, 2026.
• VTracer README and LICENSE, https://github.com/visioncortex/vtracer: colour pipeline, comparison with Potrace, 1.0 CLI options and presets, libraries, licence notice. Checked November 13, 2026.

Test images, conversions and measurements were made by Lucky Graphics Editorial on November 13, 2026, with Python 3, Pillow 12.3.0, ImageMagick 6.9.12, potrace 1.16, the vtracer PyPI package 0.6.15 and librsvg 2.58 (rsvg-convert). Results apply to those images and versions; other images and builds will give different numbers.