Upload an image to vectorize it
Works best with logos, icons, illustrations, and line art
You Might Also Like
Free Image to SVG Converter — Vectorize PNG, JPG & WebP with Advanced Editing Controls
About this tool
What Is This Image to SVG Converter?
This is a free, browser-based image to SVG converter that transforms raster images — PNG, JPEG, WebP, GIF, and BMP — into clean, scalable SVG vector graphics without uploading anything to a server. Every pixel trace, every path calculation, every SVG filter, and every line of code is generated entirely inside your browser tab using the Canvas API and a client-side image tracing algorithm. Your source images never leave your device.
SVG (Scalable Vector Graphics) is a fundamentally different kind of image format from the rasters you upload. A JPEG stores a fixed grid of colored pixels. An SVG stores mathematical descriptions of shapes — curves, lines, and filled regions — that look perfectly sharp at any size, on any screen, at any zoom level. Converting a raster image to SVG is called vectorization or image tracing, and it is the technique used by professional tools like Adobe Illustrator's Image Trace, Inkscape's Path Tracer, and commercial services like Vector Magic.
The tracing engine — powered by ImageTracer.js — quantizes the image into a limited color palette, traces color-region boundaries to find contours, and fits smooth Bézier curves to those contours to generate path data. You control every key tracing parameter: color mode (Color, Grayscale, or Black & White), color count, smoothing, detail level, source blur, stroke width, line noise filter, and corner snapping. Two distinct control groups give you full command over the output quality. The Pre-Trace section modifies the source data before any path is drawn — blurring the input image reduces noise and produces organically smooth curves, adding a stroke width creates outlined vector art, enabling Line Noise Filter removes speckle artifacts from JPEG or scan compression, and Corner Snap forces near-right-angle corners to exact 90-degree turns for precise logo geometry. The SVG Effects section works as a post-processing layer directly on the generated SVG code — Output Softness injects a feGaussianBlur filter for a smooth, glowing finish; Sharpen injects a feConvolveMatrix edge-enhancement pass; and Drop Shadow injects a feDropShadow filter with fully adjustable blur, X offset, and Y offset, adding realistic depth to any vector illustration. All effects are embedded into the downloaded SVG file, not just a preview overlay.
A before/after Compare slider lets you drag a divider across the canvas to see your original image and the traced SVG result side by side, so you can judge trace quality immediately without switching between tabs. Four Quick Presets — Logo, Icon, Sketch, and Illustration — instantly configure all tracing parameters for the most common use cases, eliminating the need to manually tune each slider from scratch.
This tool is designed for logos, icons, illustrations, line art, charts, diagrams, simple cartoons, and other graphics with clear shapes and flat or semi-flat colors. For photographs, use Black & White mode with high smoothing and Source Blur to create bold, stylized vector illustrations rather than attempting a literal pixel-for-pixel conversion.
Features
- Client-side vectorization — no file upload, no server, your images stay on your device
- 3 color modes: full Color (2–32 colors), Grayscale (luminance-based), Black & White (threshold-based)
- Color limit slider (2–32) and B&W threshold slider (0–255) for precise palette control
- Smoothing slider — adjust Bézier curve fit from pixel-sharp detail to clean simplified curves
- Detail level slider — suppress noise and speckle regions below a minimum path size
- Source Blur (0–5) — pre-blurs the source image before tracing for organically smooth, noise-free paths
- Stroke Width (0–5px) — adds outline strokes to every traced path for illustrated, outlined vector art
- Line Noise Filter — removes single-pixel speckle artifacts from JPEG compression and scan noise
- Corner Snap — forces near-90° angle corners to exact right angles for crisp logo geometry
- Output Softness (0–8) — injects feGaussianBlur SVG filter for smooth glow effects on the final vector
- Sharpen — injects feConvolveMatrix edge-enhancement filter to crisp up path edges
- Drop Shadow — injects feDropShadow SVG filter with adjustable blur, X offset, and Y offset sub-controls
- All SVG effects are embedded in the downloaded file — not just a browser preview
- 4 Quick Presets: Logo, Icon, Sketch, Illustration — one-click optimal settings
- Before/after Compare slider — drag a divider to compare original and SVG result side by side
- Live SVG preview with background toggle: checkerboard, white, black, or transparent
- SVG Code tab — inspect and copy raw SVG markup with embedded filter definitions
- One-click Download SVG and Copy SVG Code buttons in the header
- Drag & drop, click-to-upload, and Ctrl+V clipboard paste supported
How to Use
Upload your image by dragging it onto the drop zone, clicking to open a file picker, or pressing Ctrl+V to paste from clipboard. PNG, JPEG, WebP, GIF, and BMP are supported up to 10 MB. Very large images are automatically downscaled to 1200px wide before tracing to keep processing fast.
Quick Presets — start here before touching any slider. Click Logo for a clean 8-color smooth trace, Icon for an ultra-smooth 4-color result, Sketch for high-contrast black and white line art, or Illustration for a detailed 24-color trace. Each preset sets all tracing parameters at once. You can fine-tune any slider after applying a preset.
Color Mode and palette controls — choose Color mode for logos and illustrations with distinct flat areas, then use the Colors slider (2–32) to match your brand palette exactly. Choose Grayscale for monochrome illustrations with tonal depth. Choose Black & White for ink drawings, sketches, and single-color logos, then use the Threshold slider (0–255) to decide which luminance values become black versus white.
Smoothing and Detail — move the Smoothing slider toward "Smooth" to reduce anchor points and produce clean, minimal curves ideal for logos. Move it toward "Sharp" to trace fine lines and corners precisely. Use the Detail slider toward "Simplified" to skip tiny regions from compression artifacts, or toward "Max detail" to capture every stroke in thin line art.
Pre-Trace controls — these modify the source image before any path is drawn, so they trigger a full re-trace. Enable Source Blur (0–5) to apply a Gaussian blur to the input image before tracing — this smooths out JPEG noise, halftone patterns, and fine texture, producing organically curved paths with fewer anchor points. Increase Stroke Width (0–5px) to add a visible outline stroke to every traced path, creating an illustrated or cartoon-like vector aesthetic. Toggle Line Noise Filter on to automatically remove single-pixel speckle artifacts caused by JPEG compression, scanner noise, or anti-aliasing — this keeps the SVG clean without manually adjusting the Detail slider. Toggle Corner Snap on to force any angle within a few degrees of 90° to an exact right angle — particularly useful for logos, icons, and diagrams where geometric precision matters.
SVG Effects — these are instant post-processing filters applied to the finished SVG output without re-tracing. They inject standard SVG filter elements into the file, so the effects are fully embedded in whatever you download or copy. Use Output Softness (0–8) to add a feGaussianBlur pass over all paths — at low values this subtly smooths jagged micro-edges; at higher values it creates a soft-focus glow aesthetic useful for decorative backgrounds and watermarks. Enable Sharpen to apply a feConvolveMatrix edge-enhancement kernel that increases contrast along path edges — useful when tracing images with slightly soft or blurry source content. Enable Drop Shadow to add a feDropShadow filter that lifts the vector artwork off the background; adjust Blur (softness of the shadow), X offset (horizontal distance), and Y offset (vertical distance) independently.
Use the Compare tab to drag a split-slider divider across the canvas and compare your original image with the traced SVG side by side — invaluable for judging trace quality at specific regions of the image. Switch the background between Checker, White, Black, and None to evaluate transparency and edge quality in different contexts. Click Download SVG to save the file with all effects embedded, or Copy SVG to paste the code directly into HTML, Figma, Inkscape, or a React component.
Common Use Cases
Frequently Asked Questions
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.