Image to SVG Converter

Trace a PNG or JPG into an SVG with presets for logos, posters and photos, then adjust colours, detail and smoothing with a live preview and file size.

The interactive tool loads here when JavaScript runs.

About this tool

What is the Image to SVG Converter?

The Image to SVG Converter traces a bitmap, such as a PNG logo or a JPG scan, into vector paths and gives you an SVG file. Pick a preset (Logo / line art, Poster / few colours or Photo), adjust the number of colours, the level of detail and the smoothing, and watch the traced result update next to the original.

Tracing is an approximation. The tracer reduces the image to a small palette, finds the outline of every area of each colour and fits straight lines and curves to those outlines. Clean flat artwork comes out crisp and small. Photos come out looking posterised, and because every patch of colour becomes a path, their SVG files are often larger than the JPG you started with. The tool shows the SVG size next to the original so you can judge.

Everything runs in your browser with imagetracerjs, a public-domain JavaScript tracer. The image is not uploaded.

  • Three presets: logo, poster and photo
  • Colour count from 2 to 64, detail and smoothing controls
  • Live side-by-side preview with SVG size and path count
  • Output width and height with a scalable viewBox
  • Download as .svg or copy the code
  • Runs locally with imagetracerjs; no upload
Read the guide: Raster to Vector: How Image Tracing Works and When to Redraw Instead

How to use the Image to SVG Converter

  1. Drop a PNG, JPG, WebP or GIF onto the upload area, or click Choose Image.
  2. Pick a preset: Logo / line art for flat graphics, Poster / few colours for illustrations, Photo for pictures.
  3. Adjust Colours, Detail and Smoothing. The traced preview refreshes a moment after each change.
  4. Watch the SVG size and path count. If the SVG is bigger than the original, reduce colours or detail.
  5. Set the output width and height if you need a specific size, then click Download SVG or Copy SVG Code.

Worked examples

Two-colour logo

Input

A 500 x 500 PNG logo, Logo / line art preset with 4 colours

Output

An SVG with a handful of paths and a few kilobytes of markup

Flat colour areas trace into a small number of clean paths. This is where tracing works best.

Phone photo

Input

A 4032 x 3024 JPG, Photo preset with 24 colours at 600 px trace resolution

Output

A posterised SVG that can run to megabytes

Every patch of colour becomes a path. The tool flags when the SVG is larger than the original, which is common for photos.

Background and insight

A raster image is a grid of coloured pixels; a vector image is a list of shapes described by coordinates. Vectors scale to any size without blurring and can be edited shape by shape, which is why logos, icons and diagrams are best kept as SVG. Going from vector to raster is exact. Going back is guesswork, because the pixels do not record where the designer intended an edge or a curve to be.

Colour tracers such as this one work in stages. First the colours are quantised to a palette of a few to a few dozen entries. Each palette colour becomes a layer, and the edges of every connected area on that layer are followed to form closed outlines. Those outlines are then fitted with straight segments and quadratic Bezier curves within an error threshold: a small threshold follows every pixel step, a large one smooths over them. Short outlines below a minimum length are dropped as noise. The classic monochrome alternative, Potrace by Peter Selinger, follows the same idea for black and white artwork.

In this tool, Detail sets the error threshold and the noise filter together, from 3 pixels at 1 down to 0.1 pixels at 10. Smoothing applies a selective blur before tracing, which hides JPEG artefacts and scanner noise. Trace resolution caps the longest side the image is scaled to before tracing; larger inputs are scaled down to keep tracing fast, and the SVG viewBox records the traced size while the width and height you choose set its display size.

Common use cases

  • Recovering a lost logo file

    Turn the only PNG or JPG copy of a simple logo into an SVG you can scale for print and the web.

  • Icons and stamps from scans

    Trace a scanned signature, stamp or hand-drawn icon into crisp vector shapes.

  • Cutting machines and laser engravers

    Produce outline paths from simple artwork for software that needs vector input.

  • Posterised artwork

    Use a low colour count on a photo for a deliberate flat, screen-print style illustration.

Tips and limitations

  • Start from the largest, cleanest source you have. Upscaled or heavily compressed JPGs trace into wobbly edges.
  • Use the fewest colours that still look right. Each extra colour adds a layer of paths and bytes.
  • Add Smoothing for JPG sources to stop compression artefacts turning into tiny paths.
  • Text in a traced image becomes shapes, not editable text, and small type rarely traces cleanly. Retype it in a vector editor.
  • For a logo that matters, treat the trace as a starting point and tidy the paths in Inkscape or Illustrator, or redraw it.
  • The preview is rendered as an image, so you can open the result in the SVG Viewer to inspect its viewBox and element count.

Frequently asked questions

Can I convert a JPG photo to SVG?

Yes, but the result is a posterised approximation made of flat colour shapes, not a photo-quality vector. Photo SVGs are also often larger than the JPG. Use the Photo preset, keep colours low and check the size readout.

Why is my SVG file bigger than the PNG?

Each colour area becomes a path written out as text coordinates. Detailed images produce thousands of paths. Reduce the colour count, lower Detail, raise Smoothing or reduce the trace resolution to get a smaller file.

Is image tracing the same as redrawing a logo in vector?

No. A tracer guesses edges from pixels, so corners may be rounded, curves slightly lumpy and thin lines broken. A person redrawing the logo knows the intended geometry. Tracing is a fast starting point and fine for simple marks.

Will the text in my image stay editable in the SVG?

No. Letters are traced as filled shapes like everything else. To get editable text, identify the font and retype the words in a vector editor.

What do the Detail and Smoothing settings change?

Detail sets how closely the curves follow the pixel edges and how small a speck can be before it is dropped. Smoothing blurs the image slightly before tracing so noise and JPEG artefacts do not become paths.

Does the image to SVG converter upload my image?

No. The image is decoded, scaled and traced in your browser by imagetracerjs, and the SVG is built in memory. Nothing is sent to a server.

Can I use the traced SVG for a Cricut or laser cutter?

Often, for simple artwork. Use the Logo preset with 2 colours for a clean black and white outline. Check the paths in your machine software, since tiny fragments and overlapping layers can cause extra cuts.

Is there an in-depth guide to the Image to SVG Converter?

Yes. “Raster to Vector: How Image Tracing Works and When to Redraw Instead” covers the background, how it works, common pitfalls and worked examples. Read the full guide.

Related Tools You May Like

Free, in-browser tools that pair well with this one.