Rasterlessvector

SVG or PNG — choose by what the picture is made of

The two formats answer different questions rather than the same question differently. A PNG is a measurement: a grid of colour samples, one per pixel, stored losslessly, so what comes out is what went in. An SVG is a set of instructions — this path runs from here to there, fill it with this colour — read and drawn fresh by whatever opens the file.

That difference settles most of the argument. Instructions can be carried out at whatever scale you ask for, so one SVG logo is as crisp on a business card as on the side of a van; a PNG has a native size, and enlarging it only enlarges the samples until edges go soft. In exchange, a measurement can describe anything at all, while an SVG holds only what somebody could express as shapes.

So the useful question is not which format is better, but what the picture is made of. Flat colour, hard edges, type and line work belong in SVG. Continuous tone — skin, sky, fabric, film grain, a gradient with thousands of steps in it — belongs in PNG. What follows is the part people argue about: size, editing, transparency, acceptance, and why it matters that one of the two is plain text.

How it works

  1. Look at the artwork. Flat colours and hard edges point to SVG; continuous tone and photographic detail point to PNG.
  2. Ask how large it has to get. A fixed, known final size is fine as a PNG exported at that size; anything that has to stretch wants SVG.
  3. Check where the file has to land — plenty of systems, marketplaces and email clients take PNG and nothing else.
  4. If the answer came out SVG and all you have is a PNG, trace it. The converter below reads PNG, JPEG and WEBP, one image per conversion.

Who this is for

The question usually arrives attached to somebody else's requirement. A print shop asks for vector artwork and sends the PNG back. A developer is deciding what goes in an img tag on a page that has to stay sharp on a dense screen. A craft cutter or a laser wants a contour to follow rather than a picture of one.

It arrives the other way round too, and that case gets far less attention. Someone is about to spend an afternoon turning a product photograph into SVG because an article said vector is better. Vector is not better; it is different. A screenshot handed over as traced curves loses its crisp text and its subtle greys and gains nothing.

Editing is the other reason to move between them. In a PNG you edit pixels: erase part of a logo and you have a hole to repaint. In an SVG every shape is an object you can click, refill, reshape or delete. But an SVG traced from a PNG is not the designer's original file — the shapes are the ones the tracer found, and lettering arrives as outlines rather than live type.

The same line drawing as a PNG and as an SVG; the PNG strokes break up when enlarged while the SVG curves stay clean. — source image The same line drawing as a PNG and as an SVG; the PNG strokes break up when enlarged while the SVG curves stay clean. — vector result
The same line drawing as a PNG and as an SVG; the PNG strokes break up when enlarged while the SVG curves stay clean.

Settings we suggest

If the decision came out SVG and a PNG is all you have, the converter below is the crossing: it measures where each colour boundary really sits and redraws it as curves.

Colours is the setting that matters. The slider runs from 2 to 64, and for artwork that belongs in SVG the honest number is small — count the inks in the design and add one for the background. Six to ten holds a flat logo together; 2 gives a single silhouette with one clean contour. Leave draw style on Fill shapes and shape stacking on Cut-outs so no two shapes overlap. Free and watermark-free: judge the preview first, then a free Google sign-in gets the files.

And the blunt version of the warning above: tracing a photograph into SVG is usually the wrong move. Smooth tone becomes thousands of flat regions, the file can end up heavier than the PNG it came from, and the result looks posterised. Keep photographs as PNG.

Drop an image here

or click to choose one

PNG · JPG · WEBP

Questions

Which file is smaller, the SVG or the PNG?

It depends on the artwork, and it catches people out both ways. For flat work SVG wins easily — an icon can be a few hundred bytes of path data where the pixels were tens of kilobytes. Trace a photograph, though, and several thousand paths of coordinates can make the SVG heavier than the PNG it came from. Weight follows the shape count, not the pixel dimensions.

Can both formats have a transparent background?

Yes, which is why people sometimes switch when they did not need to. PNG carries a full alpha channel, 256 levels per pixel, so anti-aliased edges and soft shadows fade out properly. An SVG has no background unless you draw one, and any shape can be made partly see-through with an opacity value.

Is SVG supported everywhere by now?

In browsers, yes: every current browser draws SVG in an img tag, in CSS and inline in the markup. The real gap is elsewhere — content systems, marketplaces, email clients and profile pictures often refuse a file ending in .svg, because it is code that can carry scripts. PNG is taken almost everywhere, which makes it the safer hand-off.

People say an SVG is just text. What does that buy me?

It is XML, so it opens in a text editor. It goes into version control as a readable diff, showing which path changed rather than that a binary file did. You can search it. And CSS or JavaScript can reach the shapes, so an inline icon takes its colour from the text around it, or changes for dark mode, without a second file.

Can I just rename my PNG to .svg?

No. The bytes are unchanged, so anything that really reads SVG will fail to open it. Wrapping the PNG inside an svg tag around an image element does produce a valid file, and some converters stop there, but the pixels are still pixels: it softens when enlarged, and a cutter finds no path to follow.

Is there ever a good reason to convert a photo to SVG?

A narrow one. If you want the photograph as a graphic — a silhouette for vinyl, a high-contrast stencil, a two-tone poster treatment — tracing at a low colour count gives exactly that, and the flatness is the point. If you want it to keep reading as a photograph, leave it alone; tracing discards the tone it flattened.

Related pages