SVG or PNG: which one to use, and when to convert

These two formats are not really competitors. One stores shapes and one stores pixels, and most of the time the picture itself decides which it should be. The interesting cases are the ones where it does not, and the practical question of what to do when SVG is the right format and the destination will not take it.

The difference in one line

A PNG is a grid of pixels, each with a colour and an opacity. An SVG is a list of shapes with instructions for drawing them. What is an SVG covers the format in detail; everything below follows from that one difference.

Choosing by content

Where a design mixes the two, a logo over a photograph for instance, you can embed the photograph inside the SVG, and the result is a vector container holding a bitmap that will not scale. Usually it is cleaner to export the whole thing as a PNG.

The size numbers

The comparison is dramatic in both directions, which is why generalisations about “SVG is smaller” are unhelpful.

A typical company logo, three or four paths and some text converted to outlines, is somewhere between 2 and 8 KB as an SVG. As a PNG at 400 pixels wide it might be 20 KB, and at 800 pixels, which is what a dense display needs for a 400 pixel slot, perhaps 60 KB. The SVG serves every size from the same few kilobytes.

An interface icon is often 300 to 800 bytes as an SVG. As a PNG at 24 and 48 pixels it is two files of a couple of kilobytes each, and it cannot be recoloured.

Now reverse it. A photograph traced to vector can easily be 2 to 8 MB of path data, renders slowly enough to be noticeable, and looks like a poster print of the photograph rather than the photograph. The same picture is 200 KB as a JPG.

For PNGs that are genuinely the right format, there is a lot of room to make them smaller: reducing PNG file size covers palette reduction and lossless optimisation, which together often take 60 to 80 percent off.

Where SVG is not accepted

This is the practical reason PNG is still everywhere, and it is a longer list than people expect.

• Email. Support is unreliable and in several major clients absent. Use PNG.
• Social profile pictures and posts. Almost universally PNG or JPG only.
• Marketplace listings. Amazon, Etsy, eBay and the rest take raster formats.
• App icons. iOS and Android both want raster assets at specific sizes, generated from a vector at build time rather than shipped as one.
• Favicons. Modern browsers accept SVG favicons, but PNG fallbacks are still needed for older ones and for many platform surfaces. Favicon and app icon sizes has the full set.
• Office documents. PowerPoint and Word handle SVG in recent versions and older ones do not, and the recipient’s version is the one that matters.
• Many content management systems and forums, which block SVG uploads on security grounds, because an SVG can contain script.
• Printers. Many prefer PDF or EPS, both of which are vector, so this is a format question rather than a vector question.

The pattern is clear enough: on your own web page, SVG. Anywhere you hand a file to somebody else’s system, PNG.

Transparency in both, and how it differs

Both formats give you a picture that sits correctly on any background, and they do it in different ways that occasionally matter.

A PNG has an alpha channel: a fourth number per pixel saying how opaque that pixel is, from fully transparent to fully solid. A soft edge, such as the boundary of a strand of hair, is a ramp of partly transparent pixels, and that is exactly what makes a good cutout look convincing. The alpha channel explains it properly.

An SVG has no pixels, so there is nothing to make transparent. It simply does not draw where no shape is. On top of that, any shape can be given an opacity, and groups can be given one too, so a logo can have a 40 percent watermark version without a second file.

The practical difference appears at the edges. A PNG’s edge quality is fixed at the resolution it was saved at: enlarge it and the soft edge is enlarged with it, which is how halos appear. An SVG’s edge is drawn fresh at whatever size you ask for, so it is always exactly one device pixel of antialiasing wide, which is why an SVG logo looks cleaner than a PNG one on a dense display even when both are nominally the right size.

The other practical difference is that a PNG’s transparency can be lost by the destination. Plenty of viewers, email clients and Office surfaces flatten it onto white or black without warning. PNG shows a black or white background covers where that happens and what to do about it.

Accessibility and search

One more reason to prefer SVG where it fits: the text inside it is real text.

A chart saved as a PNG is a picture of a chart. A screen reader gets whatever alt text you wrote and nothing else, a reader cannot select a label, and a search engine cannot index any of it. The same chart as an inline SVG has its labels as text elements, which can be read, selected and indexed, and it can carry a title and description that assistive technology uses.

This matters most for diagrams, charts and anything with a lot of labelling, and it is a genuine argument for SVG in documentation and reports that has nothing to do with file size.

The workflow that avoids all of this

Keep the SVG as the master. Export PNGs from it whenever a destination needs one, at exactly the size that destination wants.

This is better than the alternative, which is keeping a folder of PNGs at various sizes and enlarging the nearest one when a new size is needed. Enlarging a bitmap loses quality; rendering the vector again does not, because there was never a resolution to lose. Enlarging a logo without blur covers what to do when you have inherited a folder of PNGs and no vector.

Export a set rather than one file while you are there. The sizes are known in advance: favicon sizes, the home screen icon, the web app manifest icons, the email signature, the social profile. Producing them in one go and putting them in one folder is the difference between doing this once and doing it every few months.

Two things that go wrong when converting

Blurry output from a sharp vector. The cause is a drawing with a viewBox and no width or height. It has no intrinsic size, so a browser draws it at the CSS default of 300 by 150 pixels, and a naive converter scales that up to whatever you asked for. Reading the viewBox first and rendering at the target size fixes it completely.

A file that will not convert at all. Almost always a missing xmlns attribute on the root element. Such a file works perfectly when pasted into HTML and fails as an image, which is exactly what makes it confusing.

Both are repairable without touching the drawing itself, which is what the converter here does before it renders: it reads the file’s own size, writes the size you asked for onto a copy of the root element, and adds a namespace or a viewBox if either is missing. The shapes inside are left exactly as the designer wrote them.

Questions

Is SVG better quality than PNG?

For shapes, it is not a quality comparison: an SVG has no resolution, so it is exactly as sharp as whatever draws it. A PNG is a fixed grid and is only sharp at or below its own size. For photographs the comparison reverses, because a photograph has no shapes to store.

Which is smaller, SVG or PNG?

For a logo or an icon, SVG, often by a factor of five or ten, and the gap widens the larger it is displayed. For a photograph, PNG by a very large margin, and a JPG or WebP is smaller still.

Can I use SVG in email?

Not reliably. Several major email clients, including Outlook and Gmail in some configurations, block or fail to render SVG. Use PNG in email, always, and keep the SVG for the website.

Do both support transparency?

Yes. PNG has an alpha channel, giving each pixel its own opacity. An SVG simply does not draw where nothing is drawn, and can also set opacity on any shape. Both produce a picture that sits correctly on any background.

Should my website logo be SVG or PNG?

SVG if the logo is made of shapes, which almost all are. It is smaller, sharp on every display, and can follow a dark theme. Keep a PNG for email signatures, social profiles and anywhere that rejects SVG.

How do I convert SVG to PNG without losing quality?

Render it at the size you need rather than at a default. Since the SVG has no pixels, nothing is lost in the conversion at all: you are choosing a resolution, not degrading one. The only way to lose quality is to render smaller than you need and then enlarge.