1. Home
  2. Guides
  3. SVG vs PNG

SVG · Image formats

SVG vs PNG

An SVG stores instructions for drawing a picture, so it stays perfectly sharp at any size and stays tiny for flat artwork — but it cannot represent a photograph, and a great deal of software refuses to open it. A PNG stores actual pixels, so it works in everything, handles photographs and screenshots properly, and keeps transparency — but it is fixed at one resolution and gets blurry when enlarged. Use SVG for logos, icons and diagrams you control. Use PNG for anything photographic, anything going into an upload form, and anything being sent to someone whose software you cannot predict.

The difference is instructions versus pixels

A PNG is a grid of coloured dots. A 400 by 400 PNG holds 160,000 of them, and that is all the information there will ever be. Display it larger and the browser has to invent the pixels in between, which is why enlarged images look soft.

An SVG holds no dots at all. It is a text file describing shapes: this circle here, that path there, filled with this colour. Whatever size it is displayed at, the shapes are drawn fresh at that size, so the edges are exact at 16 pixels and exact at 16,000.

That single difference produces every other difference between the two formats.

Need to convert the file?

SVG to PNG

Where SVG wins

Logos and icons, decisively. One SVG replaces the whole ladder of sizes a PNG logo needs, stays sharp on high-density screens, and is usually a fraction of the size — a flat two-colour logo might be 2 KB as an SVG and 40 KB as a PNG large enough to be useful.

Anything that needs editing later. The shapes are still shapes, so a colour can be changed, text can be corrected, and the whole thing can be restyled with CSS when it sits on a web page. A PNG is baked.

Diagrams and charts, for the same reasons: crisp text at any zoom level, small files, and the ability to recolour without going back to the original tool.

Where PNG wins

Photographs, absolutely. A photograph is not made of shapes, so there is nothing for an SVG to describe. Attempts to convert one produce either an enormous file or an unrecognisable poster effect. For photographs, PNG works and JPG is usually better still.

Screenshots, which are pixel-exact by nature and lose their point if redrawn.

Anywhere you cannot control the software. Upload forms usually reject SVG on purpose, because an SVG is a text file that can carry scripts and serving user-uploaded ones back is a known security hole. Older desktop applications frequently cannot open SVG at all. PNG opens in everything.

And anywhere the artwork depends on fonts or external images. An SVG that names a font it does not embed will render with whatever the viewing machine happens to have, which may not be what the designer intended. A PNG has already resolved all of that.

Converting between them goes one way

SVG to PNG is a normal operation. The shapes are drawn at whatever resolution you ask for, and because the source is vector, a larger export is a genuine re-render rather than an upscale — a 4096 pixel PNG is exactly as sharp as a 512 pixel one.

The reverse is not a conversion at all. Going from vector to raster discards the shape information permanently, and getting back requires tracing the pixels to guess at shapes. That is a different operation with a different result, and any tool claiming to convert PNG to SVG is doing that rather than reversing anything.

This is worth knowing before you throw away an original. Keep the SVG; export PNGs from it as you need them.

Frequently asked questions

Is SVG better quality than PNG?

For flat artwork, yes at every size, because the shapes are redrawn rather than scaled. For photographs the question does not apply — SVG cannot usefully represent one.

Which is smaller, SVG or PNG?

SVG, usually by a lot, for logos and icons. PNG for anything detailed or photographic, where describing every shape would take far more space than storing the pixels.

Why will a website not let me upload an SVG?

Because an SVG can contain scripts, so most platforms block it deliberately as a security measure rather than by oversight. Convert it to PNG first.

Can I convert a PNG back into an SVG?

Not meaningfully. The shape information was discarded when the image was rasterised. Tracing tools guess at shapes from the pixels, which produces something new rather than recovering the original.

Does SVG keep transparency?

Yes, and so does PNG. Both handle a full alpha channel, so converting SVG to PNG preserves transparent areas. Converting to JPG does not, because JPEG has no alpha channel and fills transparency with white.

What size should I export an SVG at?

1024 pixels on the long side suits most documents and web use; 2048 or 4096 for print or high-density displays. Since the source is vector there is no quality cost to a larger export beyond file size.