PNG to SVG Converter

About the PNG to SVG Converter

This PNG to SVG converter traces raster images into scalable vector graphics directly in your browser. It reads the image with a Rust-based pipeline compiled to WebAssembly, segments it into flat color regions, and emits a self-contained SVG document you can drop straight into a website, design tool, or icon set. Your image never leaves the device — every byte is processed locally.

The tool ships two tracing pipelines: a fast marching-squares tracer for line art and crisp shapes, and an enhanced Bézier-fitted tracer for photos, portraits, and organic illustrations. Twenty-one presets cover the common cases, and an Adjust toolbar lets you nudge the result without re-tuning every slider.

Key Features

• Two tracing pipelines — marching squares for sharp edges, edge-aware Bézier fitting for photos and gradients.
• 21 ready-made presets — including Photo, Portrait, Logo, Cartoon, Watercolor, Pixel art, Blueprint, and Black & White.
• Live parameter controls — color count, smoothing, curve tolerance, region area, and more, all exposed as sliders.
• One-click adjustments — Less noise, More detail, Smoother curves, Sharper corners, Smaller file, More/Fewer colors, and a Fix dark blotches recipe.
• Side-by-side preview — compare the original raster and the generated SVG with a transparent checker background.
• Browser-only conversion — the WebAssembly module loads on demand the first time you click Convert; nothing is uploaded.

How Does PNG to SVG Conversion Work?

The converter decodes your PNG or JPEG, reduces the palette with median-cut quantization, and traces each color region into closed contours. The basic pipeline emits straight line segments using marching squares. The enhanced pipeline runs an edge-preserving bilateral filter, builds edge-aware color masks, simplifies each contour with the Visvalingam–Whyatt algorithm, and fits cubic Bézier curves to the result. Both pipelines output a single SVG document with grouped paths, ready to use.

How to Convert PNG to SVG

1. Drop a PNG or JPEG into the upload area, or click to browse.
2. Pick a preset that matches your image type, or stay with the default.
3. Switch the pipeline to Basic or Enhanced if needed.
4. Click Convert. The first run downloads the WebAssembly tracer; subsequent conversions reuse it.
5. Review the SVG preview, tweak sliders or use the Adjust toolbar, and re-convert until it looks right.
6. Click Download SVG to save the result alongside your source file.

Choosing the Right Pipeline

The Basic pipeline runs faster, produces smaller files, and keeps corners crisp — ideal for line art, pixel art, screenshots, and flat illustration. The Enhanced pipeline costs more time and bytes but produces noticeably smoother curves on photos, portraits, logos, and anything organic. If a Basic result looks blocky, switch to Enhanced; if an Enhanced result looks bloated, try Basic with the same color count.

Common Use Cases

• Logo refresh — convert a legacy PNG logo to a resolution-independent SVG suitable for retina displays and print.
• Icon libraries — turn a folder of PNG icons into scalable SVG marks for design systems and component kits.
• Web performance — a small SVG often weighs less than the equivalent PNG at retina resolution and renders crisply at any size.
• Stickers and merch — convert PNG illustrations to SVG for cutting machines, embroidery digitisers, and vinyl plotters.
• Posterised art — apply the Poster, Pop art, or Silhouette presets to flatten a photo into a few bold colors.
• Architectural and map traces — the Blueprint preset turns clean line drawings into editable vector geometry.

Parameter Reference

Every slider on the form maps to a single parameter on the underlying Rust pipeline. Knowing what each one does makes targeted tuning much faster than guessing.

Basic pipeline

Number of colors (num_colors · int · default 16)

How many colors the palette is reduced to via median-cut quantization. Lower values produce simpler, smaller SVGs but flatten gradients into bands. Higher values keep more color detail at the cost of file size and per-color path count. Try 2 for B&W, 8–12 for cartoons or logos, 24–32 for photos.

Threshold (threshold · float 0–1 · default 0.10)

Edge sensitivity used by the marching-squares contour tracer. Lower values pick up subtle edges (more shapes, more detail). Higher values ignore weak edges (cleaner output, fewer tiny regions). Drop this for dark or low-contrast images; raise it for bright or noisy ones.

Smooth level (smooth_level · int 0–10 · default 5)

Strength of Gaussian smoothing applied to contour points before path output. 0 keeps the raw stair-stepped pixel boundary (use for pixel art). 10 rounds aggressively, losing sharp corners. Mid-range (4–6) suits most photos.

Hierarchical (nest holes inside fills) (hierarchical · bool · default false)

When enabled, contours are organised into a parent/child hierarchy so nested shapes stack correctly (holes cut into outer fills). Helps for images with overlapping or enclosed regions; usually unnecessary for flat illustrations.

Enhanced pipeline

Number of Colors (num_colors · int · default 0 — auto)

0 auto-detects a palette size from the image's color complexity. Any positive value forces an exact count. Use a small value (2–4) to flatten illustrations; use a high value (24–48) to preserve photo gradations.

Curve Tolerance (curve_tolerance · float · default 2.0)

Maximum allowed deviation between the fitted cubic Bézier curve and the source contour, in pixels. Lower hugs the contour tightly (more curves, larger SVG). Higher permits looser fits (fewer curves, smaller SVG, smoother look). Try 1.0 for hi-fi photo, 2–3 for cartoons, 3.5+ for compact output.

Simplification Tolerance (simplification_tolerance · float · default 1.5)

Visvalingam–Whyatt point removal threshold. Lower keeps more polyline vertices before Bézier fitting (more faithful, more curves). Higher drops more "unimportant" vertices (cleaner, blockier). Pair with Curve Tolerance — both control fidelity from different angles.

Corner Threshold (deg) (corner_threshold · degrees · default 60)

Angle change above which a vertex is treated as a hard corner and preserved instead of smoothed. Lower (30–45°) keeps more sharp corners — good for line art and logos. Higher (75–90°) smooths through everything except dramatic angles — good for cartoons and photos.

Min Region Area (min_region_area · pixels · default 20)

Regions smaller than this many pixels are dropped before vectorization. Lower (1–5) keeps fine specks (detail-heavy work, hi-res inputs). Higher (40+) eliminates noise and tiny color islands (compact output, photos).

Edge Threshold (edge_threshold · int 0–255 · default 25)

Sobel edge magnitude cutoff used by the edge-aware quantizer. Lower respects subtler edges, keeping color boundaries near soft transitions. Higher only treats strong edges as boundaries. Lower this for dark images; raise it for bright or clean ones.

Smoothing Passes (smoothing_passes · int · default 2)

How many majority-vote passes are applied to the per-color binary masks before contour extraction. 0 preserves jagged edges. 1–2 denoises typical inputs. 3+ for very noisy photos at the cost of fine detail.

Smooth Window (smooth_window · int · default 3)

Window size (pixels) for boundary-point Gaussian smoothing. Works alongside Smoothing Passes but on the extracted contour rather than the mask. Larger windows produce softer, less faithful curves.

Preprocess (Bilateral Filter) (preprocess · bool · default true)

Run an edge-preserving bilateral filter before quantization. Smooths noise while keeping color boundaries crisp — essential for photos. Turn off for clean inputs (pixel art, line drawings, flat illustrations) where the filter would erase intentional detail.

Recolor from Source (recolor · bool · default true)

After regions are detected, sample the original image to assign each region a color from the source rather than from the quantized palette. On gives more natural-looking photo output. Off snaps to the quantized palette — better for posterized or logo-style results.

Tips for Better Results

Workflow

• Start from a preset, then tweak. The presets encode sensible parameter combinations — adjusting one or two values from there is much more reliable than dialing in 15 numbers from scratch.
• Iterate quickly. Most parameters are cheap to change. Convert, eyeball the result, adjust one value, convert again. Watch the conversion time and SVG size in the status bar.
• Compare side-by-side. The original raster preview sits next to the SVG output — zoom your browser in to spot lost detail, color banding, or jagged edges.
• Inspect path data if curves look wrong. The path string tells you whether the issue is shape detection (too few or many M…Z blocks), simplification (too few points), or curve fitting (jagged L instead of smooth C).

Image preparation

• Crop tightly. Empty backgrounds eat shapes and inflate file size — crop to the subject before converting.
• Boost contrast first for dark or washed-out images. The vectorizer detects regions by color separation; better contrast in produces cleaner regions out.
• Don't pre-blur photos. The Enhanced pipeline's Preprocess option already runs an edge-preserving bilateral filter — adding more blur upstream wipes out the boundaries it needs.
• Resize huge images. A 4K source rarely produces a noticeably better SVG than a 1500 px version, but it takes much longer and may hit browser memory limits. Use the Image Resizer to scale down to 1024–2048 px before converting.

Tuning by image type

• Logos and icons: 8–12 colors, Simplification Tolerance 1.8–2.5, lower Corner Threshold (40–50°) to keep crisp brand corners. Turn Recolor from Source off so the palette stays clean.
• Photos: Preprocess on, Recolor from Source on, 16–32 colors. Lower the Number of Colors for a posterized look; raise Curve Tolerance (3.0+) to fight file bloat.
• Cartoons and flat illustration: 6–10 colors, higher Corner Threshold (70–80°) for soft curves, more Smoothing Passes (2–3).
• Line art and sketches: 2–4 colors, low Corner Threshold (30–40°), Preprocess off, low Smooth Window to keep linework crisp.
• Pixel art: Smooth level 0 (basic) or Smoothing Passes 0 (enhanced), tiny Min Region Area, Preprocess off. Anything else will smear the pixels into mush.

Reducing file size

• Cut the Number of Colors first — fewer colors mean fewer paths and smaller SVG. Halve and re-check before touching anything else.
• Raise Curve Tolerance (Enhanced) and Simplification Tolerance together. They compound: looser fits and fewer points produce far less path data.
• Raise Min Region Area to drop tiny noise islands you wouldn't see anyway.
• After downloading, run the SVG through SVGO for another 20–40% reduction with no visual change.

Improving fidelity

• Lower Curve Tolerance (try 0.8–1.2) for tighter Bézier fits.
• Lower Simplification Tolerance (0.6–1.0) to keep more contour points.
• Lower Min Region Area (try 5 or 1) to capture fine detail.
• Lower Smoothing Passes if edges feel washed out.
• Increase the Number of Colors — but every added color costs roughly proportional to its area in path data.

Fixing black smudges or blotchy dark regions

• Why it happens. Dark hair, shadows, and dark backgrounds have very little color variation. The quantizer can't separate them cleanly, so the contour tracer carves them into dozens of tiny irregular shapes, then Recolor from Source samples each one as near-black — producing a "smudged" mosaic.
• Set the Number of Colors explicitly instead of leaving it on auto. Auto-detect tends to over-segment photos. Try 12–20 for portraits.
• Raise Min Region Area to 40–80. This drops the tiny noise blobs that show up in low-contrast dark zones — they were never visually meaningful anyway.
• Raise Edge Threshold to 40–60. Subtle gradients inside shadows are no longer treated as color boundaries, so dark areas merge into a few big smooth shapes instead of many fragments.
• Raise Smoothing Passes to 3–4 and Smooth Window to 5–7. More smoothing on the per-color masks closes pinhole gaps between adjacent dark regions.
• Turn Recolor from Source off. Counter-intuitive, but with recolor off the region gets a single quantized palette color instead of the noisy per-pixel sample — often dramatically cleaner for shadows.
• Lift shadows before converting. In any image editor, raise the "shadows" or "blacks" sliders so dark regions have visible color separation. The algorithm needs a few levels of grey to tell hair from background; if the source is crushed black, no parameter will save it.
• Replace dark backgrounds. If the subject sits on near-black, mask the subject and put it on a bright (or transparent) background first. Removes spurious dark regions entirely and the conversion runs roughly three times faster.
• Sanity-check Curve Tolerance. Values above ~4 produce wildly loose Bézier fits that look like blobs. The default 2.0 works for most photos; try 1.0 for fine detail.
• Quick recipe for portraits: apply the "Photo — high quality" preset, then bump Min Region Area to 40 and Edge Threshold to 40. Convert. If still blotchy, turn Recolor from Source off.

When PNG to SVG isn't the right tool

• Photorealistic images with smooth gradients vectorize poorly at any setting — a vector format with hard region boundaries will always look posterized. Keep them as raster and shrink them with the Image Compressor instead.
• Text in images won't become real SVG <text> — it will be traced as shapes. Re-typeset text as actual SVG text where possible.
• Highly textured images (fur, foliage, grain) explode in path count without visual benefit. Either flatten the texture first or keep raster.

Frequently Asked Questions

Is my image data safe when I convert PNG to SVG?

Every byte stays on your device. The WebAssembly tracer runs in your browser; the only network request the tool makes is to fetch the ~4 MB tracer module itself, and that happens after you click Convert. No image is uploaded.

Can I convert JPEG to SVG with this tool?

Yes. The accepted formats are PNG and JPEG. The same parameters and presets apply to both — JPEG just decodes one step earlier in the pipeline.

Why does the first conversion feel slow?

The first click downloads the WebAssembly tracer and initialises it. Subsequent conversions reuse the loaded module and run instantly up to the actual tracing time, which depends on image size and pipeline (usually 0.5–10 seconds).

Does the SVG keep transparency from the source PNG?

Mostly. The tracer treats transparent pixels as a separate region, so large transparent areas pass through. Soft alpha gradients are flattened during quantization, like any other gradient — you'll see bands rather than smooth fades.

How big can the input image be?

There is no hard limit, but conversion time grows quickly with image area, and the browser must hold the decoded pixels and tracing buffers in memory. For best results downscale to 1024–2048 px on the long side before converting.

What does "— custom —" mean in the preset dropdown?

It indicates that you have manually changed at least one slider since the last preset was applied. Selecting any named preset overwrites the form values; Custom is informational and cannot be applied.

Related Tools

You might also find these tools useful:

• SVG to PNG Converter — rasterize an SVG back to PNG at any resolution.
• JPG to PNG Converter — convert JPEGs to lossless PNG before tracing.
• Image Converter — convert between supported raster image formats.
• Image Compressor — shrink raster images without changing format.