SVG or PNG for a QR Code? It Depends Where It Is Going

22 September 2026 · Free QR Pro

Use PNG when the code goes on a screen, into an email or into a chat. Use SVG when it goes to a printer, into design software, or when it has gradients or rounded shapes. The rest of this page is the measurements behind that advice, including a case where the PNG is the smaller file.

The difference in one paragraph

A PNG is a grid of coloured pixels at a fixed resolution. Enlarge it past that resolution and the edges of each module blur. An SVG is a list of drawing instructions: squares here, circles there, this colour. It is redrawn sharply at any size, from a business card to a banner, from the same file.

Measured file sizes

We exported the same address in three styles from this site's generator, as PNG at three resolutions and as SVG:

SVG is not automatically the smaller file. For a plain black code, the 512-pixel PNG is 8.7 kB against 29.4 kB for the SVG. Large areas of flat black and white compress extremely well as PNG. Gradients are the opposite case. Every pixel along the soft edge of a module is a slightly different colour, and PNG compression cannot do much with that, so the 1024-pixel gradient PNG is 467 kB against 47.8 kB for the SVG, which describes the gradient once.

For print, use SVG, or enough pixels

A printer needs roughly 300 pixels per inch for a sharp result. To work out how many pixels a PNG needs, divide the printed size in millimetres by 25.4 and multiply by 300:

Resizing matters as much as resolution. When a PNG is scaled by an amount that does not divide evenly, some modules come out a pixel wider than others and edges pick up grey. An SVG avoids the question entirely, which is why print shops and design software such as Illustrator, Inkscape, Affinity and InDesign prefer it. Recent versions of Word and PowerPoint accept SVG images too.

For screens and messages, use PNG

Many email clients and chat apps will not display an SVG as a picture at all; some show it as a file attachment instead. A PNG displays everywhere. For a code on a web page, a presentation slide or a phone screen, a 512- or 1024-pixel PNG is plenty.

One trap: transparent backgrounds

Both formats can have a transparent background, and it is often the wrong choice. Placed on a dark surface, a transparent code becomes dark-on-dark and stops scanning. Some viewers also display transparency as black. If you export with a transparent background to place the code on a coloured design, make sure the final layout puts a light, plain area behind the code, including its white margin.

Quick reference