How to convert an image to SVG
- Drop a PNG, JPG, WebP, GIF or BMP on the box, click it to choose a file, or paste one with Ctrl+V (Cmd+V on a Mac). A sample logo is converted first.
- Pick a mode. Trace to vector redraws the picture as filled shapes. Embed image in SVG keeps your exact pixels inside an SVG wrapper.
- For tracing, set Number of colors (2 to 64) and Detail (Simple, Balanced or Detailed). Tick Make the background transparent to drop a plain background.
- Check the preview, then press Copy SVG code or Download .svg.
How the two modes work
Trace picks a palette from the colors your image uses most, gives each pixel the nearest palette color, then finds and fits the outline of every region with straight lines and curves. The fitting uses the public-domain library ImageTracer.js 1.2.6, loaded from jsDelivr when you trace; your image is never sent anywhere. Pictures over 1000 px are scaled down first, and small ones are scaled up (at most 8 times) for smoother curves. Embed writes an SVG image element whose href is your file as a base64 data URL. Base64 spends 4 characters on every 3 bytes, so the SVG is about a third larger than the file.
Worked example
With the defaults (Trace to vector, 8 colors, Balanced), the status line reads: Sample logo (sample-logo.png), 400 x 300 px. Traced 3 colors into 4 shapes. SVG size: 2.7 KB. The shapes are the white background, the blue disc, the amber triangle and the small white block cut out of it. Zoom in on the downloaded file and the edges stay sharp. The size can differ by a few hundred bytes between browsers. Simple detail gives 1.3 KB and Detailed gives 4.8 KB. Tick the transparent background option and the line becomes "Traced 2 colors into 2 shapes. SVG size: 1.5 KB. Background color removed." The white block vanishes too, because it matches the background color.
Limits and edge cases
- Photos trace poorly. They become posterized pictures of thousands of shapes, often several megabytes. Use Embed for photos.
- Text becomes outlines, gradients become flat bands, and very thin lines can vanish at Simple.
- Transparency in a PNG is kept. Embed accepts files up to 30 MB and converts BMP and similar formats to PNG first. Older design programs may need
xlink:href. Shrink big files first with the Image Compressor. - SVG files are refused because they are already vectors. Use the SVG Optimizer to shrink one, or the Image to Base64 Converter for a raw data URI.
Frequently asked questions
Can I convert a PNG or JPG to SVG without losing quality?
It depends on the picture. A logo, icon or line drawing traces into clean shapes that stay sharp at any size, though tiny details and gradients are simplified. A photo cannot become a true vector, so use Embed to keep every pixel.
What is the difference between Trace and Embed?
Trace redraws the picture as filled color shapes that scale to any size and can be edited. Embed puts your original file inside an SVG without changing it, so it stays pixels and blurs when enlarged.
Why is my SVG so large?
Every region of color becomes a shape, so many colors and edges mean thousands of shapes. Lower the Number of colors, choose Simple, or start from a cleaner image. Embedded SVGs are a third larger than the file.
How do I make the background transparent?
Tick Make the background transparent while tracing. If at least three corners share a color, every area of that color is removed, including matching areas inside the artwork. It works best on a plain background.
Can I edit the traced SVG in a vector editor?
Yes. A traced SVG is made of ordinary filled paths, one per color, which editors such as Inkscape, Illustrator and Figma can open and recolor. An embedded SVG holds one bitmap, so there are no shapes to edit.
Sources: ImageTracer.js (Unlicense), MDN Web Docs SVG image element and data URLs.