Convert PNG or JPG to SVG Free: Real Paths, Not a Bitmap in a Wrapper

A PNG or JPG becomes a real SVG only when it is traced – the pixels are replaced by filled shapes (paths) – and many “PNG to SVG” converters skip that step and just put the bitmap inside an SVG file. You can tell in 30 seconds: open the .svg in a text editor and look for <image and a long base64 string (wrapped bitmap) or for <path d= lines (traced). Tracepen traces: drop the PNG or JPG into the browser, press Download, pick SVG. It is free to use with a free 3dshouse account (a daily allowance of free exports; tracing and previewing are never counted) – convert a PNG to SVG online, or see the full Tracepen Online page for every control.

Tracepen handles a colour image of any kind, and it is exact on flat-colour graphics such as logos, icons and flat colour areas. It is not a one-colour tracer (the black-and-white cut-off kind turns a multi-colour picture into one silhouette), and it is not an AI vectorizer (those redraw the picture, so the result is not accurate to the source). It is deterministic: the same image with the same settings gives the same SVG, so you can reproduce a file next month.

Two kinds of “PNG to SVG” converter: tracing and wrapping

A PNG or JPG is a grid of coloured pixels. An SVG is text that describes shapes. There are two ways to get from one to the other, and both are sold under the same name:

• Wrapping keeps the pixels. The converter writes an SVG whose only content is an <image> element pointing at your PNG, usually as base64 text. MDN describes that element as one that “includes images inside SVG documents” and “can display raster image files”. The file has an .svg extension and nothing else about it is vector.
• Tracing throws the pixels away and writes the outlines of the colour areas as paths, each with a fill colour. That is the only route to something you can recolour, cut or scale.

What the converters say about themselves, read on their own pages on 2026-10-28:

People hit the wrapped kind all the time. An Adobe Community expert answers a user whose SVG came out bigger than his JPG: “the JPEG gets embedded in the SVG, which of course makes a larger file” (thread). On Doom9 a reply to a user asking about resizing: “Your SVG just has the PNG embedded in it. It hasn’t converted anything” (thread). In a VisualNEO thread the poster discovers that “the file size for svg was very eerily close to size of the base64 encoded data” (thread).

How to tell in 30 seconds: open the SVG in a text editor

Right-click the .svg, open it with Notepad or any text editor (not a browser, which only draws it), and compare:

Cricut’s help centre also states what a raw PNG or JPG gets you instead: raster files “are uploaded as a single layer”, not a layer per colour (How to upload images into Design Space). The refusal quoted above is from its unsupported items page.

What a real SVG from Tracepen contains

Open any Tracepen SVG in a text editor and the whole file is this:

• One root <svg> with a viewBox and a width / height, both in the pixels of the traced picture. MDN: with a viewBox, “a transform stretches or resizes the SVG viewport to fit a particular container element” – so the same file can be 16 px in a toolbar or a metre wide on a banner. A picture whose longer side passes 1500 px is scaled down first, and the file is in those pixels.
• One <path> per colour layer, each with a flat fill hex colour. The path text uses straight lines and curves only (M, L, C and Z commands, three decimals).
• Holes are real holes. Every path carries fill-rule="evenodd", so the inside of an “O” or an “8” is see-through, not a white blob on top.
• A thin stroke in the fill’s own colour (stroke-width="1" unless you set a Line thickness). It stops hairline seams between neighbouring colours in viewers that draw each shape on its own.
• No <image>, no text, no gradients, no script. Letters arrive as outlines, not as editable type, and a gradient arrives as steps of flat colour.

A shortened line from a real file (a four-colour logo on white, saved as a JPG, traced on 2026-10-28):

<path d="M189.120 277.500 C 189.597 273.650,191.614 265.424,193.601 259.220 C 195.923 251.974,199.055 244.918,202.358 239.493 ... L 72.000 166.000 Z " fill="#2b9c4a" stroke="#2b9c4a" stroke-width="1" stroke-linejoin="round" fill-rule="evenodd"/>

Layers are written largest area first, so the first <path> is usually the background. That matters for file size and for transparency, both below.

Convert a PNG or JPG to SVG in Tracepen, step by step

1. Open the app and sign in with a free 3dshouse account (the button opens a browser tab; come back when it is done).
2. Drop in the PNG or JPG (WebP, GIF and BMP work too, up to 50 MB and 250 million pixels). It traces by itself. The longer side is scaled to 1500 px if it was bigger.
3. Look at Color Layers. One swatch per colour, plus a summary such as “N faces / M layers”. Compare M with the number of colours you know the picture has.
4. Tune, then press Convert. Color number starts at the number of colours found and can only go down. Merge min area (1-64 px, default 4) absorbs specks; Noise filter (Off, 1-5) evens out a compressed JPG; Corner smooth (0-100%, default 80%) keeps corners sharp at 0% and rounds them at 100%. Convert is never counted, so re-run it as often as you like.
5. Untick the background swatch if the SVG should be transparent or the file should be light (next sections).
6. Press Download, pick SVG. The file is named after your picture (logo.png gives logo.svg). Each download counts as one export against the free daily allowance.
7. Open the .svg in a text editor once: if you see <path lines and no <image, you have what you asked for.

Open Tracepen Online (free) →

File size: what really drives it (measured)

A traced SVG is not automatically smaller than the PNG, and the colour count is not what makes it big. Two test images, traced with default settings on 2026-10-28 (your numbers will differ, the pattern is the point):

• The background layer was the biggest part of both files. Its outline follows the border of the picture one pixel at a time (the path starts M 0.000 0.000 L 1.000 0.000 L 2.000 0.000 ...), and that single path was 44 of the 50 KB in the logo and 189 of the 299 KB in the lettering. If you do not need the background, untick it before you download.
• Merge min area is the strongest size knob. At 1 px the lettering file more than tripled, because every speck of the source became a shape; from 16 up it stopped shrinking. The clean logo barely changed (51 KB at 1, 50 KB from 4 up).
• Colour count barely moved the size (47 KB at 2 colours, 50 KB at 5). Size follows the number of points along the edges, not the number of colours.
• The N faces counter is the early warning: thousands of faces means a heavy file in Illustrator, Cricut or a browser. Raise Merge min area or lower Color number before you download.

How many colours to ask for

For flat artwork, the number of colours it really has plus one for the background. The count Tracepen proposes is usually that, and you can only go down from it. Going down merges the closest colours: useful to fold two near-identical blues into one, harmful if you collapse two colours that are meant to differ. At 1, the dark parts of the picture come out as a single shape, the quickest route to a one-colour stencil.

The test logo above has slight shading inside each segment; it came back as five flat fills (four colours and the white), which is what a trace of a gradient looks like. If an exact brand colour is the job, follow the steps in logo to vector, where each swatch is retyped to the brand hex. In both test files the background swatch came out a hair off pure white (#fffffe and #fefefe), so if you keep a white background, set the swatch to the colour you want rather than trusting it.

Transparency: the background is a layer

A JPG has no transparency, and a PNG’s transparent pixels are put on a solid backdrop before tracing: white, or black if the picture itself contains pure white. Either way the backdrop becomes a layer you can see in Color Layers. Untick it and it is left out of the SVG, so the file really is transparent. A white logo on a transparent PNG shows up as a white layer on a black one; untick the black layer and the white shapes are what you keep.

Where the SVG goes: Cricut, Silhouette, web, Figma

Mistakes that spoil a PNG to SVG conversion

• Trusting the extension. Renaming logo.png to logo.svg, or “saving as” SVG in a tool that only embeds the picture, produces a file that opens and does nothing a vector does. Run the text-editor test.
• Tracing a grainy JPG with Merge min area at 1. Every speck becomes a shape and the file grows several times over (992 KB against 299 KB in the lettering test). Keep 4 or higher, and add a little Noise filter for compressed JPGs.
• Leaving the background in. It is the heaviest layer and it puts a coloured box behind your shape. Untick it.
• Expecting type to stay type. Letters are outlines after tracing. If you know the font, retype the text in your design app and keep the trace for the symbol only.
• Expecting a gradient to stay smooth. Every layer is one flat colour, so a gradient becomes steps. Rebuild the gradient in your design app on top of the traced shape.
• Starting from a tiny or screenshot-framed picture. A trace is only as exact as the pixels it gets. Crop away the browser frame first (Crop) and use the largest copy you have.

Free ways to convert PNG to SVG, compared

For the same comparison on a photograph, see the image to vector tool comparison.

FAQ

Why is my SVG bigger than the JPG I converted?

Most likely the converter embedded the JPG inside the SVG: base64 text is about a third bigger than the picture it encodes. Open the SVG in a text editor; an <image element with data:image means nothing was traced. A properly traced SVG can also be large if the background layer is kept or specks became shapes: untick the background and raise Merge min area.

Can I resize an SVG to any size without losing quality?

A traced SVG can be scaled freely: it holds outlines and a viewBox, so edges stay sharp at any size, though it is only as detailed as the PNG it was traced from. A “converted” SVG that only wraps the PNG keeps the original pixels and goes blocky when enlarged.

How can I tell if a PNG to SVG converter really vectorized my image?

Open the downloaded .svg in a text editor. <path d= lines with coordinates mean it was traced; one <image element with a long base64 string, and a file about a third bigger than your PNG, means it was only wrapped.