Image to SVG Converter — Free, Vectorize PNG, JPG & WebP with Advanced Editing Controls

Image-to-SVG conversion works best for flat-color graphics with clear defined edges: logos, icons, illustrations, cartoons, line art, clip art, charts, diagrams, and QR codes. These have a limited number of distinct color regions that trace as clean paths. Photographic images with millions of colors produce very large, complex SVG files. For photos, use Black & White mode with high Smoothing and Source Blur to create a stylized graphic rather than a literal trace.

No. Everything processes entirely inside your browser using JavaScript and the HTML5 Canvas API. Your images are never sent to any server, never stored, and never logged. When you close or refresh the tab, the image and SVG are gone permanently. There are no privacy concerns with sensitive imagery, confidential logos, or internal design files.

Source Blur applies a Gaussian blur to the pixel data of the source image before any path tracing begins. This reduces high-frequency detail — JPEG compression artifacts, halftone dot patterns, scanner noise, and fine textures — so the tracing algorithm sees smooth color gradients instead of noisy pixel edges. The result is SVG paths with fewer anchor points and more organic, flowing curves. Use Source Blur at 1–2 for JPEG logos and scanned artwork; go higher (3–5) to deliberately abstract and stylize highly detailed images. Because this modifies the input data, it triggers a full re-trace.

Stroke Width adds an outline stroke to every traced path in the SVG at the specified pixel width. With Stroke Width at 0 (the default), all paths are filled shapes only — no outlines. Increasing Stroke Width to 1–2px creates a traditional illustrated or cartoon-like look with visible outlines separating color regions. Higher values (3–5px) produce a bold, woodcut-style aesthetic. The stroke color matches each path's fill color, so adjacent regions with different colors will appear outlined in their own colors. Because stroke is a tracing parameter, changing it triggers a re-trace.

Line Noise Filter enables the tracer's built-in speckle suppression. When active, it ignores single-pixel isolated regions that typically result from JPEG compression block artifacts, anti-aliased edges, or scan noise. Without it, these speckles trace as hundreds of tiny disconnected paths that inflate file size and create visual noise. Enabling Line Noise Filter keeps the SVG clean and compact without requiring you to manually increase the Detail (path omit) slider. It is automatically enabled in the Logo, Icon, and Illustration presets.

Corner Snap (rightangleenhance in the tracing engine) detects path corners that are close to 90 degrees and snaps them to exact right angles. Real-world logos, icons, and UI graphics almost always contain intentionally perpendicular edges — but image compression and anti-aliasing introduce slight deviations from exact 90°. Without Corner Snap, these near-right-angle corners trace as slightly curved or angled paths. With it enabled, they snap to precise geometric corners, producing cleaner, more accurate SVGs for architectural, typographic, and technical graphic content.

Output Softness injects a feGaussianBlur SVG filter element into the SVG code and wraps all paths in a filtered group. The blur is applied to the rendered SVG, not to the path data itself, so the mathematical path shapes remain unchanged. At low values (0.5–2) it subtly blurs jagged micro-edges left by tracing, producing a smoother visual result. At higher values (4–8) it creates a dreamy soft-focus or glow aesthetic. Yes — the filter is fully embedded in the downloaded file, so the effect is preserved everywhere the SVG is used: HTML, CSS background, Figma, Illustrator, or a React component.

Sharpen injects a feConvolveMatrix SVG filter using a 3×3 sharpening kernel (center weight +5, edge weights −1). This increases contrast along path edges, making the traced shapes appear crisper and more defined — especially useful when the source image was slightly blurry or out of focus. Note that Sharpen and Output Softness can be combined: Sharpen runs first to enhance edges, then Softness blurs the result — which can produce a stylized "soft but defined" look depending on the values used.

Enable the Drop Shadow toggle to reveal three sub-sliders: Blur controls how soft or hard the shadow edge is (0 = hard drop shadow, 10 = very diffuse). X offset shifts the shadow horizontally (positive = right, negative = left). Y offset shifts the shadow vertically (positive = down, negative = up). The effect uses an SVG feDropShadow filter at 55% opacity, which works on the entire SVG as a unit. It is baked into the downloaded SVG file — paste the code into any HTML page or design tool and the shadow renders automatically.

Quick Presets are one-click configurations that set all tracing parameters simultaneously for common use cases. Logo sets 8 colors, smoothing 2.5, corner snap on, and line filter on — ideal for brand logos with flat colors and clean geometry. Icon sets 4 colors and smoothing 4 for the cleanest, most simplified vector shapes. Sketch sets Black & White mode, threshold 140, smoothing 0.5, and line filter off — preserving maximum line detail from drawings and sketches. Illustration sets 24 colors, smoothing 1, source blur 1, and line filter on — for rich detailed artwork. After applying a preset you can adjust any individual slider to fine-tune without affecting the others.

Clicking the Compare tab reveals a split-view panel with your original raster image on the right and the traced SVG result on the left. A draggable handle sits in the middle — drag it left to reveal more of the SVG result, drag it right to reveal more of the original image. This lets you inspect trace quality region by region: check whether fine details were captured, whether colors are accurate, and whether the effects like softness or drop shadow look right. The background toggle (Checker, White, Black, None) applies to the Compare view as well, so you can check transparency on any background.

SVG size scales with complexity — more color regions and more detail means more path data. To reduce size: lower the Colors slider, increase Smoothing, increase the Detail threshold, enable Line Noise Filter, or choose Black & White mode. Enabling Source Blur before tracing also reduces path complexity significantly because it smooths the pixel data so fewer, simpler curves are needed to trace each region. A logo with 4 flat colors typically produces a 10–50 KB SVG; a photographic image at 32 colors can produce megabytes.

Yes — SVG is an open XML format. Open the downloaded file in Inkscape (free), Adobe Illustrator, Affinity Designer, or Figma. Any embedded SVG filter effects (Output Softness, Sharpen, Drop Shadow) appear as filter elements inside a defs block and can be edited or removed. You can ungroup paths, change fill colors, simplify anchor points, and combine the traced artwork with other design elements. The SVG also works as inline SVG in HTML and can be styled further with CSS.

Yes — the tool runs entirely in the browser and works on modern mobile browsers including Chrome for Android and Safari for iOS. File upload is supported via the file picker. Note that very large images and complex SVG effects may process slowly on mobile due to limited CPU performance; for best mobile results use images under 500 KB and avoid Source Blur values above 2.