Webz Tools
Menu

Image to SVG Vectorizer

A PNG or JPG stores a grid of colored pixels. An SVG stores shapes: paths with fill colors that a browser draws at whatever size you ask for. The Image to SVG Vectorizer traces the visible color regions of a raster image and rebuilds them as vector paths, so a flat logo, an icon or a piece of artwork can become an SVG you can resize, recolor and edit as shapes.

Tracing is an approximation. The tool finds regions of similar color and fits curves around them. It does not recover the original artwork an image was exported from, and it never wraps your PNG or JPG inside an SVG: the file you download contains only vector shapes. The image is processed locally in your browser for vectorization, by a tracing engine that runs in a background worker so the page stays responsive.

Runs in your browser. Image to SVG Vectorizer processes your input on your own device. Nothing you enter or upload is sent to a server.

Did this tool help you? ☕

WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.

Buy Me a Coffee (opens in a new tab)

How to use the Image to SVG Vectorizer

  1. Drop a JPG or PNG onto the upload area, or click it to choose a file.
  2. Pick a preset: Logo / Icon for flat artwork, Illustration for a balanced default, or Detailed / Photo for more colors and finer detail.
  3. Choose Color or Black & White. Open Advanced settings only if you want finer control over colors, noise and path simplification.
  4. Select Vectorize Image. Larger and more detailed images take longer, and you can cancel at any time.
  5. Compare the original with the vector result, then select Download SVG or Copy SVG Code. If you change a setting afterwards, vectorize again to update the result.

Supported formats: JPG, JPEG and PNG input, one image at a time, up to 4096 pixels on either side and about 8.4 megapixels in total. The output is an SVG made of vector paths.

Raster images and vector images

JPG and PNG files are raster images: a fixed grid of pixels. Enlarge one far enough and the grid shows as blurry or blocky squares. An SVG is a vector image: a list of shapes described by coordinates and colors, which a browser redraws at any size you ask for.

Vectorizing, also called tracing, bridges the two. The tool looks for regions of similar color in the pixel grid, follows their outlines and fits smooth curves to them, then stacks those shapes in the SVG. Because those outlines are estimated from pixels, every trace is an approximation of the picture, not a copy of it.

Choosing a preset

Each preset sets the tracer's real color, shade, noise and simplification settings. Start with the one that matches your image, trace it, and adjust from there.

PresetBest forWhat it doesTrade-off
Logo / IconFlat logos, icons, simple artworkMerges similar colors, ignores small specks and simplifies pathsDrops fine detail and subtle shading
IllustrationMost images (the default)Balanced color and detailPhotographs look posterized, with a moderate number of shapes
Detailed / PhotoPhotographs and richly shaded artworkKeeps more colors, shade steps and small regionsMany more shapes and a larger SVG, which can be bigger than the original JPG

What to expect

Flat logo, PNG, 512 × 512, transparent background, three colors

Input

Logo / Icon preset, Color mode

Output

A handful of paths and a small SVG. The background stays empty rather than becoming a filled shape

Photograph, JPG

Input

Detailed / Photo preset, Color mode

Output

Hundreds to thousands of shapes. It reads as a stylized, posterized version of the photo, and the SVG can be larger than the JPG

Black ink drawing on white, PNG

Input

Illustration preset, Black & White mode

Output

One color of vector shapes for the dark linework. Adjust the Black threshold if lines are too thin or too heavy

Transparent images

In Color mode, fully transparent areas of a PNG stay empty in the SVG, including holes such as the inside of a ring or the counter of a letter. A pixel counts as transparent when it is less than half opaque, and the rest are traced as solid color, so a soft glow or shadow does not become partial opacity.

In Black & White mode, transparent areas are treated as white, so only the dark parts of the artwork are traced. JPG files have no transparency, so a white or colored background in a JPG is traced as an ordinary shape.

Vectorizing, converting, resizing and rasterizing

These tools sound alike and do different jobs.

  • Image to SVG traces raster pixels into vector shapes. The result is an approximation.
  • SVG to PNG does the reverse: it rasterizes existing vector artwork into pixels.
  • Image Converter changes a raster file's format (JPG, PNG or WebP) and keeps it a raster image.
  • Image Resizer changes pixel dimensions. Use it to make a large image fit this tool's size limit.
  • Background Remover cuts out a subject so you can trace a transparent PNG instead of a busy background.
  • Color Palette reads the main colors from an image, and Favicon Generator builds a favicon pack from a logo.

Things worth knowing

  • Vectorization approximates the visible pixels with new shapes. It does not recover the original artwork, its exact paths or any live text.
  • One image at a time, up to 4096 pixels on either side and about 8.4 megapixels in total. Larger images are rejected with a message, not reduced silently.
  • JPG and PNG input only.
  • Photographs become stylized, posterized shapes, and their SVGs are often much larger than the original file. An SVG is not always smaller than a raster image.
  • Gradients are rebuilt from stacked flat-color regions, not SVG gradient definitions, and partial transparency is not kept as opacity.
  • Text and thin lines only a few pixels wide can merge or disappear, and text in the original becomes shapes.
  • A result larger than 10 MB or with more than 60,000 shapes is rejected instead of being shown, because it could make the page unresponsive. Try the Logo / Icon preset or a larger Noise filter.
  • Tracing a large or detailed image can take a while. It runs in the background, and you can cancel or change settings at any time.

Frequently asked questions

How do I convert PNG to SVG?

Upload your PNG, choose Logo / Icon for flat artwork or Illustration for anything more detailed, then select Vectorize Image and download the SVG. The result is traced vector paths, not your PNG placed inside an SVG file.

Can I convert JPG to SVG?

Yes, JPG and JPEG files are accepted. A JPG has no transparency and carries compression noise, so a photograph or a heavily compressed logo traces into many small shapes. Clean, flat artwork traces far more cleanly.

Is the result a real vector?

Yes. The SVG is made of path shapes with fill colors. Before a result is shown or offered for download, the tool parses it, checks that it contains vector geometry and rejects anything that embeds a raster image, so it never hands you a PNG or JPG hidden inside SVG markup.

Does the SVG contain my original image?

No. The SVG has no image element, no data: URI and no base64 copy of your picture. You can delete the original PNG or JPG and the SVG still displays, because everything in it is geometry.

What images vectorize best?

Logos, icons, flat illustrations and clean artwork with sharp edges, solid colors and good contrast. The fewer distinct colors and the cleaner the edges, the simpler and more accurate the traced paths.

Why do photographs create larger, more complex SVGs?

A photograph is made of smooth gradients and fine texture rather than a few flat colors, so the tracer has to build hundreds or thousands of small shapes to approximate it. The result looks like a posterized illustration, and the SVG can be much larger than the original JPG.

Can vectorization recover the original logo paths?

No. Tracing approximates the visible pixels with new shapes. It cannot know how the artwork was originally drawn, so the paths, curves and any live text are not recovered. If you need the exact original, ask for the source vector file.

Does transparency work?

For PNG files, areas that are transparent in Color mode stay empty in the SVG instead of becoming a filled background. Pixels that are less than half opaque count as transparent, and partly transparent pixels such as a soft shadow are not kept as partial opacity. In Black & White mode, transparent areas are treated as white, so only the dark artwork is traced. JPG files have no transparency.

What is the difference between converting and vectorizing?

Converting a format, as the Image Converter does, re-encodes the same pixels as another raster format. Vectorizing replaces the pixels with shapes that are drawn from coordinates, which is why it behaves very differently when scaled, and why it is an approximation.

What is the difference between this and SVG to PNG?

They go in opposite directions. SVG to PNG takes existing vector artwork and turns it into pixels. Image to SVG takes pixels and traces them into vector shapes.

Are my images uploaded?

No. The image is processed locally in your browser for vectorization and is never sent to a server. The tracing engine itself is a small WebAssembly file that your browser loads from this site, which is code, not your image.

Can I edit the generated SVG?

It is ordinary SVG: paths with fill colors, which you can open in an SVG-capable editor or in a code editor. Detailed traces can contain a lot of paths, which are harder to edit by hand, and text in the original becomes shapes rather than editable text.

Why does my tiny text or fine detail look different?

The Noise filter ignores regions smaller than a set number of pixels, and thin lines or small text can merge or disappear when they are only a few pixels wide. Lower the Noise filter, try the Detailed / Photo preset, or start from a larger source image.

How large an image can I use?

Images can be up to 4096 pixels on either side and about 8.4 megapixels in total. That includes a 3840 × 2160 4K image. Larger images are rejected rather than silently reduced, because tracing time grows with pixel count. Make a large image smaller with the Image Resizer first.

Browse all image tools