PNG to SVG

What is PNG to SVG?

This page traces one PNG into SVG paths. It is meant for logos, icons, line art, and flat illustrations. Tracing stays in the browser. The image is not uploaded.

The default preset is a logo. You can switch to line art or illustration, and between color and black and white. In color mode the color count runs from 2 to 32. Detail is low, medium, or high. Before tracing, the long edge is scaled to 1024 pixels or less so a large file does not turn into an oversized path document.

When it fits

• You have a PNG logo and need vectors that can scale
• A line drawing or icon should become paths you can recolor
• A flat illustration should export as SVG without hand-tracing every shape

To edit paths afterward, use the SVG editor. To draw the SVG back to a transparent PNG, use SVG to PNG. If the file is already a bitmap and you only want JPG or WebP, use the image converter.

Limits

• PNG only. One image at a time, up to 8 MB. Transparent pixels stay transparent. The alpha channel is defined in the W3C PNG specification.
• The preview loads the cleaned SVG from a blob URL in an <img>. MDN's img element reference describes that mode: scripts inside an SVG used as an image do not run.
• Lettering becomes paths, so you cannot change the font afterward. Photos are not a preset in this version.
• Tracing uses VTracer. If that tracer does not start, a compatibility tracer runs instead and the paths are rougher.

References

• MDN: SVG
• MDN: The img element
• W3C PNG Specification
• VTracer

Usage

1. Add a PNG

Drop a .png or click to select one. The browser reads it with the File API. It is not uploaded to devtool.tech first.

One image at a time. Files over 8 MB are skipped. If several files are selected, only the first is used.

2. Choose a preset

• Logo: the default. Clear color blocks, starting at 12 colors.
• Line art: black and white. The color-count control is hidden.
• Illustration: color, with more colors, for flat artwork.

In color mode you can set the color count from 2 to 32. Low detail drops more specks. High detail keeps more shapes. Tracing starts when you click Trace. If it runs longer than about a second, the page says it is still working.

When the long edge is above 1024 pixels, the image is scaled down first. That scale is canvas pixels, not print DPI. See MDN's SVG guide for the coordinate system.

3. Review and download

The original is on the left and the SVG preview is on the right. The preview is an image, not SVG markup inserted into the page, so scripts do not run. See MDN's img element.

Download the .svg or copy the code. The file you download is the cleaned copy.

What to do next

• Both directions on one page: SVG converter
• Edit paths: SVG editor
• Export a transparent PNG: SVG to PNG
• Convert other bitmaps to JPG or WebP: image converter

References

• MDN: File
• MDN: SVG
• MDN: The img element

FAQ

Will the file be uploaded?

No. Reading, scaling, tracing, and preview all stay in the browser.

Will a transparent PNG turn white?

No. The canvas is cleared before tracing and is not filled with white. PNG can carry an alpha channel, as defined in the W3C PNG specification. The checkerboard under the preview only makes transparent areas visible.

Why are photos a poor fit?

Gradients and noise split into many paths, so the SVG is large and hard to edit. This version is for logos, line art, and flat illustrations. To convert between bitmap formats, use the image converter.

Why can't I change the font?

The result is paths, not a <text> element. MDN's text element describes real SVG text. Change the lettering in the original design.

How is this different from the SVG editor and the image converter?

This page only traces a PNG into paths. The SVG editor edits vectors you already have. The image converter converts bitmaps and does not turn a PNG into paths. To draw the result back to PNG, use SVG to PNG. During preview the SVG is loaded as an img, so scripts do not run.

References

• W3C PNG Specification
• MDN: The text element
• MDN: The img element