Is this a true vector trace like Adobe Illustrator's Image Trace?

It's a posterised pixel-region tracer: pixels are quantised into a small colour palette and same-colour horizontal runs become rectangles. That keeps the output deterministic, small, and crisp — ideal for icons, logos and flat artwork. For photographic auto-trace with curved Bezier paths, a heavier tool like Illustrator or Inkscape Potrace is still the right pick.

Does it produce smooth curves?

No — it produces axis-aligned rectangles. That sounds limiting, but for icons, pixel art, screenshots and flat illustrations it actually preserves crispness perfectly and produces tiny files. For organic curves, raise the trace resolution and the visual effect becomes indistinguishable from curves at typical view sizes.

How big will the SVG be?

Anywhere from 2 KB for a simple icon to a few hundred KB for a 320 px photograph trace. The number of unique colours and the trace resolution are the two biggest factors — halving either roughly halves the file.

Does it preserve transparency?

Yes — leave the background as is and transparent pixels (alpha under 16) are skipped entirely, leaving the SVG transparent. Use the PNG to SVG tool if you specifically need transparent-friendly defaults.

Can I edit the SVG afterwards?

Absolutely. The output is plain SVG with one group per fill colour, so you can recolour, isolate or restyle any region in Figma, Illustrator, Inkscape or directly in code.

Why is my photograph trace blurry or huge?

Photographs have thousands of unique colours and no flat regions, so the tracer ends up emitting one rectangle per pixel. Reduce the trace resolution to 96 px and the colour detail to 16 to get a stylised poster effect with a small file.

Is anything uploaded to a server?

Nothing. Decoding, posterising, tracing and encoding all happen inside your browser tab using the Canvas API. Your images never leave your device.

Can I batch-convert multiple images?

Yes — drop as many files as you need and they're processed sequentially with a live progress bar. Each result downloads as its own .svg.

Convert Image to SVG — Free Online Raster to Vector Tracer

Raster images like PNG, JPG and WebP look great at the size they were exported, then turn fuzzy the moment you scale them up for a billboard, Retina display, or 4K presentation. SVG fixes that permanently: it's a vector format that stays pin-sharp at any size and weighs a fraction of the equivalent high-resolution raster. PikDraw's Image to SVG tool traces any raster file into a clean, scalable SVG directly in your browser — no upload, no signup, no daily limit.

What is the Image to SVG - Raster to Vector Tracer?

Image to SVG is a client-side raster-to-vector converter that posterises your image into a controllable palette, then emits axis-aligned rectangles grouped by fill colour to produce a compact, editable SVG. It is purpose-built for icons, logos, screenshots, pixel art, flat illustrations and stylised photo effects — the use cases where flat vector regions outperform Bezier auto-trace.

Key features

Trace PNG, JPG, WebP, GIF and BMP into scalable SVG
Adjustable colour detail from 2 to 216 bands for poster or detailed looks
Trace resolution slider (32–512 px) controls smoothness and file size
Per-colour <g> groups make the SVG easy to recolour or restyle
Transparency-friendly mode skips empty pixels for clean cutouts
Custom background colour for non-transparent destinations
Batch convert multiple images in a single session
100% client-side — your images never leave your browser

How it works

The tracer decodes your image with the browser's image pipeline and draws it onto an offscreen Canvas downsampled to the trace resolution you picked. Each pixel is then quantised: its red, green and blue channels are snapped to a small number of evenly-spaced bands (the cube root of your colour-detail setting), producing a deterministic posterised palette. For every row of the downsampled image, the tool walks left to right and groups consecutive pixels that share the same quantised colour into a single horizontal run. Each run becomes one <rect> element in the SVG, and all rectangles sharing a fill are wrapped in a <g fill="#..."> group. This horizontal-run-length encoding cuts the rectangle count by 10–50× compared to one rect per pixel. Finally the SVG is emitted with the original raster's pixel dimensions as width and height, viewBox set to the trace resolution, and shape-rendering="crispEdges" so the result stays razor-sharp at any zoom level. The whole pipeline runs in a single browser thread and finishes in milliseconds for icons and a second or two for larger artwork.

Why use this tool

Most online raster-to-SVG converters either upload your image to a server (slow, privacy-hostile, watermarked) or produce bloated SVGs with one rectangle per pixel. PikDraw runs entirely in your browser, gives you direct control over colour detail and trace resolution, and uses horizontal-run-length encoding to keep the output small and editable. It's free, unlimited, and doesn't tie you to an account.

Common use cases

Converting PNG icons into infinitely-scalable SVG assets for design systems
Vectorising logos so they render crisply on Retina, 4K and print
Turning pixel art into editable SVG for animation in Figma or After Effects
Building OG images and favicons that look identical at every size
Recolouring flat artwork by editing the SVG's grouped fills directly
Generating stylised poster-effect SVGs from photographs
Embedding logos inline in HTML for zero-request, themeable graphics
Preparing artwork for plotters, laser cutters and vinyl machines that prefer SVG input

How to use this tool

Upload your raster image — Drop a PNG, JPG, WebP, GIF or BMP into the upload area. You can queue several files for back-to-back tracing.
Tune colour detail — Lower colour counts (8–24) produce small, poster-style SVGs that scale beautifully. Higher counts (60+) preserve photographic nuance at the cost of file size.
Pick a trace resolution — 96–160 px is the sweet spot for icons and logos. Photos benefit from 200–320 px. The output SVG keeps your original pixel dimensions via the width and height attributes.
Set a background — Choose any solid colour to back transparent pixels with — useful when the destination doesn't support transparent SVG.
Download — Each result is a single self-contained .svg file. Open it in any vector editor, drop it into Figma, or use it directly in a web page.

Who should use this

Designers turning raster artwork into design-system-ready SVG, developers preparing icons and logos for responsive web apps, content creators who want infinitely-scalable social graphics, marketers preparing assets for print and large-format display, and hobbyists working with plotters, laser cutters or pixel-art animation.

How to get started

Drop an image in, leave colour detail at 16–24 and trace resolution at 96–128 for a clean first pass, hit Trace, and download the SVG. From there, lower colour detail for a more poster-style look or raise resolution for more nuance. The whole flow takes under thirty seconds.

Best practices

Start with flat artwork — icons and logos give the best results
Use 8–16 colours when you intend to recolour the SVG later
Keep trace resolution at or below 160 px for icons; go higher only for hero artwork
If the original PNG has a transparent background, prefer the PNG to SVG tool to preserve it by default
After tracing, open the SVG in Figma or Inkscape to merge adjacent rectangles into paths if you need a single shape per region
For photos, lower the resolution and pick a moody colour palette to get an intentional poster effect rather than a noisy trace

Pro tips

Flat artwork (icons, logos, illustrations) traces dramatically better than photographs — start there.
If your SVG looks blocky, lower the trace resolution to clean up jagged edges and reduce noise.
Keep colour detail under 32 if you plan to recolour the SVG later — fewer fills means easier editing.
The SVG uses shape-rendering="crispEdges" so it stays sharp at any zoom level without anti-aliasing fuzz.

Expert insights

Start small, then climb

Trace at 96 px first. If the result is too coarse, double the resolution and re-trace. You'll find the sweet spot in two iterations.

Fewer colours = editable SVG

Keep colour detail under 16 and your SVG groups become easy to recolour by editing one fill attribute per region.

Crisp edges by default

The shape-rendering="crispEdges" attribute keeps your SVG razor-sharp at any zoom — no fuzzy anti-aliasing.

Limitations to be aware of

Output uses rectangles, not Bezier curves — organic curves look stepped at very low trace resolutions
Photographs produce larger SVGs than icons because they have far more unique colours
Anti-aliased edges in the source raster become hard transitions in the SVG by design
Extremely large source images are downsampled to the trace resolution before tracing

Frequently asked questions

Is this a true vector trace like Adobe Illustrator's Image Trace?: It's a posterised pixel-region tracer: pixels are quantised into a small colour palette and same-colour horizontal runs become rectangles. That keeps the output deterministic, small, and crisp — ideal for icons, logos and flat artwork. For photographic auto-trace with curved Bezier paths, a heavier tool like Illustrator or Inkscape Potrace is still the right pick.
Does it produce smooth curves?: No — it produces axis-aligned rectangles. That sounds limiting, but for icons, pixel art, screenshots and flat illustrations it actually preserves crispness perfectly and produces tiny files. For organic curves, raise the trace resolution and the visual effect becomes indistinguishable from curves at typical view sizes.
How big will the SVG be?: Anywhere from 2 KB for a simple icon to a few hundred KB for a 320 px photograph trace. The number of unique colours and the trace resolution are the two biggest factors — halving either roughly halves the file.
Does it preserve transparency?: Yes — leave the background as is and transparent pixels (alpha under 16) are skipped entirely, leaving the SVG transparent. Use the PNG to SVG tool if you specifically need transparent-friendly defaults.
Can I edit the SVG afterwards?: Absolutely. The output is plain SVG with one <g> group per fill colour, so you can recolour, isolate or restyle any region in Figma, Illustrator, Inkscape or directly in code.
Why is my photograph trace blurry or huge?: Photographs have thousands of unique colours and no flat regions, so the tracer ends up emitting one rectangle per pixel. Reduce the trace resolution to 96 px and the colour detail to 16 to get a stylised poster effect with a small file.
Is anything uploaded to a server?: Nothing. Decoding, posterising, tracing and encoding all happen inside your browser tab using the Canvas API. Your images never leave your device.
Can I batch-convert multiple images?: Yes — drop as many files as you need and they're processed sequentially with a live progress bar. Each result downloads as its own .svg.

Browse all PikDraw image tools →