PNG vs SVG for QR Codes: Which Format Should You Use?
When a raster PNG is fine and when you need vector SVG. What actually goes wrong when you scale a PNG, and why printers ask for vector files.
Short version: PNG for screens, SVG for print. If you're sending anything to a professional printer, send vector.
Here's why, and when the short version doesn't apply.
The difference
PNG is a raster format. It stores a fixed grid of pixels. A 330 × 330 PNG contains exactly 108,900 pixels, and that's all the detail that exists. Enlarge it and software invents the missing pixels by interpolation.
SVG is a vector format. It stores the code as geometry — a set of shapes with coordinates. There's no resolution. Render it at 2 cm or 2 metres and the maths is recomputed at whatever precision the output device supports.
For QR codes specifically, this matters more than for photographs, because a QR code is entirely made of hard edges. Those edges are the thing scanners measure.
What actually goes wrong with an enlarged PNG
Scale a 300 px PNG up to poster size and the interpolation blurs every module boundary. The scanner is trying to decide whether each cell is dark or light, and you've handed it a gradient instead of an edge.
You get a code that:
- Scans fine on your monitor
- Scans fine when the printer proofs it small
- Fails intermittently at full size, in poor light, at an angle
Intermittent is the worst outcome. It passes your quick check and then fails for a meaningful share of real customers, and you never find out — people just don't scan it and you assume nobody was interested.
There's a partial workaround: use nearest-neighbour scaling rather than
bicubic or bilinear. That keeps edges hard. Our preview does exactly this
(image-rendering: pixelated) so what you see stays crisp. But it only helps at
whole-number multiples — scaling 300 px to 1000 px is 3.33×, and the uneven
remainder makes some modules a pixel wider than others. Slightly irregular
module widths are their own scanning problem.
You can avoid all of it by generating at the size you need, or by using vector.
When PNG is the right answer
PNG is genuinely fine — often better — for:
- Websites and apps. Universally supported, and you know the display size.
- Email signatures. Some clients handle SVG badly or strip it.
- Social media. Most platforms don't accept SVG uploads.
- Slides. PowerPoint and Google Slides handle PNG more predictably.
- Anything at a known, fixed size. Generate at that size and there's no scaling to go wrong.
For screen use, generate at 2× the display size to look sharp on high-DPI displays. A code displayed at 200 px should be a 400 px PNG.
PNG is also lossless, which matters: never save a QR code as JPEG. JPEG compression creates artefacts precisely at hard edges — which is the entire content of a QR code. A heavily compressed JPEG QR code can become genuinely unscannable. If you've been handed a JPEG, regenerate rather than convert.
When you need SVG
- Any professional printing. Printers ask for vector because their RIP software rasterises at the press's resolution — often 2400 dpi, far beyond any PNG you'd send.
- Large format. Posters, banners, vehicle livery, signage, exhibition stands.
- Anything that might be resized later. Vector is future-proof; you won't need to find the original file and regenerate.
- Embedding in vector artwork. Illustrator, InDesign, Figma, Affinity — the code stays editable alongside the rest of the design.
- Etching, engraving, CNC. These processes need paths, not pixels.
A QR code SVG is also small — usually a few kilobytes, regardless of output size, because it's a geometric description rather than a pixel grid.
What to tell your printer
Send SVG. If they ask for something else:
- EPS or PDF — both vector, both fine. Any design tool converts SVG to either without quality loss.
- "300 dpi PNG" — calculate it as
size in inches × 300. A 5 cm (2 inch) code needs 600 px minimum. When in doubt, go bigger; you can always downscale cleanly, but you can't upscale. - "Vector, not embedded raster" — worth checking if you've placed the code in a layout. If you dropped a PNG into an InDesign file and exported a PDF, the PDF is vector but the code inside it is still raster. Place the SVG.
Also specify that the code should print in solid black, not rich black or a four-colour build. Registration between plates is never perfect, and a four-colour black gives you slightly fuzzy module edges. One-colour black, 100% K, is what you want.
Our implementation
The vector export here uses a single path for the whole matrix rather than one rectangle per module. That means:
- A much smaller file — thousands of modules in one path definition
- No hairline seams between adjacent modules, which some renderers produce when rectangles merely touch
- Clean handling in design software as one editable shape
We also write an explicit background rectangle. Most QR SVG output has a transparent background, which looks fine on a white artboard and then prints unpredictably against coloured stock. An explicit background means what you see is what prints.
SVG export is part of the Pro tier; PNG is free.
Quick reference
| Use | Format |
|---|---|
| Website, app | PNG at 2× display size |
| Email signature | PNG |
| Social media | PNG |
| Business card | SVG |
| Menu, flyer, poster | SVG |
| Packaging | SVG |
| Billboard, vehicle | SVG |
| Anything you might resize | SVG |
| Anything at all | Not JPEG |
Generate both from the same studio — PNG free, SVG with Pro. Check the print size guide before sending to press.