Convert PNG to SVG — Free Online Tracer with Transparency

What is the PNG to SVG - Transparency-Preserving Tracer?

PNG to SVG is a transparency-aware client-side raster tracer. It decodes your PNG, downsamples to your chosen trace resolution, posterises the colour palette into a small number of bands, then emits SVG rectangles grouped by fill colour. Empty alpha pixels are skipped so the output SVG keeps the original transparent regions, making it a drop-in replacement for the source PNG.

Key features

• Trace PNG icons, logos and flat illustrations into scalable SVG
• Transparency preserved by default — alpha pixels are skipped
• Colour detail control from 2 to 216 quantised bands
• Trace resolution from 32 to 512 px for the perfect detail/size trade-off
• Per-fill <g> grouping makes the SVG easy to recolour and restyle
• shape-rendering="crispEdges" output stays sharp at any zoom level
• Batch convert several PNGs in one session
• Runs entirely in your browser — no upload, no signup, no watermark

How it works

When you drop a PNG in, the browser decodes it natively and the tool draws it onto an offscreen Canvas downsampled to your trace resolution. Every pixel's red, green and blue channels are then quantised onto a small evenly-spaced grid (the cube root of your colour-detail setting), and the alpha channel is checked: anything under value 16 is treated as transparent and skipped. The tracer then walks each row left to right, grouping consecutive pixels that share the same posterised colour into a single horizontal run. Each run becomes one <rect> in the SVG, and all rectangles sharing a fill are wrapped in a <g fill="#..."> group. This horizontal run-length encoding typically reduces the rectangle count by an order of magnitude versus emitting one rect per pixel. The final SVG keeps your PNG's original width and height attributes, sets viewBox to the trace resolution, and uses shape-rendering="crispEdges" to disable anti-aliasing so the result stays razor-sharp at every zoom level. The whole pipeline takes milliseconds for icons and stays comfortably under a second for typical logo PNGs.

Why use this tool

Most PNG-to-SVG converters either upload your image to a server (slow and privacy-hostile) or strip transparency and bake in a white background. PikDraw runs entirely client-side, preserves transparency by default, gives you direct control over colour detail and trace resolution, and uses horizontal-run-length encoding so the output SVG is small enough to inline. It's free, unlimited, and ad-free.

Common use cases

• Converting PNG icons into design-system-ready SVG sprites
• Vectorising logos so they render crisply on Retina, 4K and print
• Replacing heavy raster favicons with infinitely-scalable SVG favicons
• Building themeable UI graphics that respect dark/light mode via CSS fills
• Recolouring brand artwork by editing one fill attribute per region
• Preparing assets for plotters, laser cutters and vinyl machines that prefer SVG
• Inlining SVG in HTML for zero extra HTTP requests
• Reducing app bundle size by replacing 4× density PNG sets with a single SVG

How to use this tool

1. Upload your PNG — Drop one or more PNG files. The tracer is tuned for icons, logos, UI elements and flat illustrations where PNG is the typical source format.
2. Pick colour detail — 8 colours is ideal for icons and flat logos. Bump it to 24–48 for illustrations with shading. The tool quantises into clean bands so the SVG stays editable.
3. Choose trace resolution — 96 px is the default and gives crisp icons. Push it to 160–256 for detailed illustrations or hero-size logos.
4. Download the SVG — Transparent regions stay transparent, opaque regions become grouped <g> blocks per fill. The file is a single self-contained .svg you can drop into Figma, Webflow, your design system, or inline into HTML.

Who should use this

Frontend developers replacing PNG icons with scalable SVG, designers preparing logos and illustrations for design systems, brand teams modernising legacy raster assets, marketers preparing artwork for large-format print, and hobbyists working with cutters or plotters that expect SVG input.

How to get started

Drop a PNG in, leave colour detail at 8 and resolution at 96 for a first pass, hit Trace, and download the SVG. Open it in Figma or your browser to confirm transparency is intact, then iterate on colour detail or resolution if you need more nuance or a smaller file.

Best practices

• For flat icons, start with 4–8 colours and 96 px resolution — files under 5 KB are easy to hit
• For logos with shading, try 16–24 colours and 128 px resolution
• Use 32+ colours only when you genuinely need photographic nuance — most logos don't
• After tracing, run the result through PikDraw's SVG Optimizer to strip whitespace and shave another 10–30% off the size
• If your PNG has heavy anti-aliasing, lower the trace resolution to clean up the edge halo
• Keep colour detail under 16 if you plan to recolour the SVG dynamically with CSS

Pro tips

• Transparency is preserved automatically — alpha pixels are skipped during tracing.
• For perfectly flat icons, set colour detail to 4–8 and you'll often get an SVG under 3 KB.
• If your PNG has anti-aliased edges, lower the trace resolution slightly to clean up the halo.
• The output SVG keeps your PNG's pixel dimensions as width and height attributes, so it drops into existing layouts without resizing.

Expert insights

Limitations to be aware of

• Output uses rectangles rather than Bezier curves — best suited for flat artwork
• Photographic PNGs produce larger SVGs and are better served by the general Image to SVG tool
• Soft anti-aliased edges become hard transitions by design
• Very large source PNGs are downsampled to the trace resolution before processing

Frequently asked questions

Will my PNG's transparency survive the conversion?

Yes. Pixels with alpha under 16 (effectively transparent) are skipped during tracing, so the resulting SVG has the same transparent regions as your original PNG. No background colour is baked in unless you explicitly want one.

Is this a real Adobe Illustrator-style auto-trace?

It's a posterised rectangle tracer, not a Bezier-curve auto-trace. For flat artwork — icons, logos, UI graphics, pixel art — the result is visually identical to a curve trace but with smaller files and more predictable output. For organic photographic vectorisation, a heavier desktop tool is still the right pick.

Why use SVG instead of PNG?

SVG scales infinitely without quality loss, is typically 5–20× smaller than a high-resolution PNG, can be styled with CSS, and renders sharply on every device from a phone to a 4K monitor. For icons and logos, switching to SVG is one of the highest-impact optimisations you can make.

Can I recolour the SVG after conversion?

Yes — the tracer groups every region by fill colour into its own <g> element. Open the SVG in any editor or a text editor and changing a single fill attribute recolours every pixel of that region.

What if my PNG is huge — say 4000×4000?

The tool downsamples to your trace resolution before tracing, so even very large PNGs trace in under a second. The output SVG's width and height are kept at the original pixel dimensions so it still occupies the same layout space.

Is anything uploaded?

No. The entire pipeline — decode, posterise, trace, encode — runs in your browser tab using the Canvas API. Your PNGs never leave your device, even briefly.

Can I trace multiple PNGs at once?

Yes. Drop a folder's worth and the tool processes them in sequence with a live progress bar, then offers each result as a separate .svg download.

Why doesn't my icon look identical to the PNG?

Posterisation snaps similar colours together, so subtle gradients flatten into bands. That's intentional — it keeps the SVG small and editable. If you want more nuance, raise the colour-detail slider; if you want a cleaner icon look, lower it.