SVG vs PNG: which should you use?

The short answer

Use SVG for logos, icons and anything made of flat shapes and text. Use PNG for photographs, screenshots, and anywhere SVG is not accepted.

The reason is one sentence long: an SVG is redrawn at whatever size it is shown, so it never blurs. A PNG has a fixed number of pixels, and enlarging it beyond them means inventing the ones that were never there.

The real difference

A PNG is a grid. Somewhere in the file is a record of what color each pixel is, and the picture is that grid displayed. A 1000-pixel-wide PNG contains a thousand columns of information and not one more.

An SVG is a description. Rather than pixels it holds text along the lines of a circle of this radius here, filled this color, with this line around it. Nothing is a picture until something draws it, and it gets drawn again every time it is displayed at a new size.

Everything else follows from that. Blow the PNG up to four times its width and each stored pixel has to cover sixteen, so the software guesses at the difference and you see the result as softness and jagged edges. Blow the SVG up and the same instructions are simply carried out at a bigger scale. There is no such thing as its native resolution.

Which one to use

Logos, icons, illustrations, charts — SVG

One file serves the favicon, the website header and the exhibition stand. It stays crisp on high-density phone screens, where a PNG sized for an ordinary display looks noticeably soft. Text inside it remains real text, so it can be searched and read aloud by a screen reader.

Photographs — PNG, or better, JPG or WebP

A photograph has no shapes to describe. Every pixel differs from its neighbor, so an SVG of one would need an instruction per pixel and end up enormous. For photographs the real choice is between WebP and JPG; PNG is the right answer only when you need transparency or perfectly exact pixels.

Screenshots — PNG

A screenshot is already pixels, and PNG keeps them exactly. It is also lossless, so text stays sharp instead of picking up the smeared edges JPG gives it. Compressing the PNG is the better lever if the file is too large.

Anywhere SVG is refused — PNG

Email signatures, many upload forms, social profile pictures and most printing services will not take an SVG. This is the everyday reason to keep a PNG copy of a logo you otherwise hold as SVG.

Why the conversion only really goes one way

SVG to PNG is simple. The instructions are carried out once, at a size you choose, and the result is recorded as pixels. Nothing is lost that was not going to be lost by fixing a size at all — and because you pick the size, you can render at two or three times the display dimensions for a high-density screen.

PNG to SVG is a genuinely hard problem, and worth understanding before you go looking for a tool. It means examining a grid of pixels and working out which shapes would have produced it — edge detection, contour following and curve fitting, which is a different class of task from anything else in image conversion.

On a flat two-color logo, tracing produces something usable. On a photograph it produces thousands of meaningless blobs that happen to resemble the picture from a distance, in a file far larger than the original and impossible to edit. Any tool promising to convert your photograph to a clean vector is describing a result it cannot deliver.

If a designer sent you a logo

You probably received several files and no explanation. The short version:

• The SVG is the master. Keep it, back it up, and send it to anyone who asks for “the vector” — printers and sign makers all want this one.
• The PNGs are convenience copies at particular sizes, for the places that will not take the SVG. If you need a size you were not given, make it from the SVG rather than enlarging a PNG.
• EPS and AI are also vectors, in older formats mainly used by print. Keep them; you will rarely open them.

If you were sent only PNGs, ask for the SVG. It costs the designer nothing, and without it every future size is a fresh compromise.

Frequently asked questions

What is the difference between SVG and PNG?

A PNG is a fixed grid of colored pixels. An SVG is a set of instructions for drawing shapes, which the computer follows fresh at whatever size it is displayed. That is why an SVG stays perfectly sharp at any size while a PNG goes soft and blocky when enlarged beyond the pixels it actually contains.

Should I use SVG or PNG for a logo?

SVG, wherever it is supported. A logo is exactly the kind of artwork SVG handles best — flat shapes and text — and one file then works at every size from a favicon to a trade show banner. Keep a PNG alongside it for the places that will not take an SVG, such as email signatures, some upload forms, and social media profile pictures.

Can I convert a PNG to an SVG?

Not in any meaningful sense. Converting SVG to PNG is straightforward — the instructions are followed once and the result recorded as pixels. Going back means guessing which shapes would produce the pixels you have, which is a much harder problem called tracing. It works acceptably on flat logos and badly on photographs, and the output is rarely something you would want to edit.

Which file is smaller, SVG or PNG?

For simple artwork like a logo or an icon, the SVG is usually far smaller — a few kilobytes against a few hundred. For a photograph the comparison does not apply, because SVG cannot sensibly represent one at all. The more detail and the more distinct shapes an image contains, the larger its SVG becomes.

Is SVG better quality than PNG?

For artwork, SVG is not so much higher quality as immune to the question — it has no fixed resolution to lose. A PNG is lossless too, so it never degrades when saved, but it does have a fixed pixel count and enlarging it beyond that always softens the result.