Glossary
SVG
SVG is a vector image format, and the right one for QR codes. Because the pattern is described as shapes rather than pixels, it prints crisply at any size and never softens module edges through interpolation.
Why it suits QR codes
A QR code is a grid of squares — the most vector-friendly thing imaginable. An SVG QR code is typically a few kilobytes regardless of output size, has mathematically exact edges, and can be recoloured or restyled by editing attributes.
Practical notes
- Use a path or rect grid, not one
<rect>per module, for very large codes — file size matters in some print workflows. shape-rendering="crispEdges"prevents anti-aliasing artefacts in browsers.- Embed, do not link, fonts if a label is included — or convert the label to outlines.
- Watch transparent backgrounds. An SVG with no background placed on a dark page produces an inverted, often unreadable code. Set an explicit light background for print.
When PNG is right
When the destination genuinely cannot take vector — some email clients, some legacy label printers, some social platforms. Generate at final size and never scale up.
Related
- Vector graphic — A vector graphic describes shapes mathematically rather than as a grid of pixels, so it can be scaled to any size without loss. For QR codes it is the…
- DPI (dots per inch) — DPI is printing resolution. For QR codes it matters because each module must be rendered from a whole number of printer dots — 300 dpi is the practical…
- Contrast ratio — Contrast ratio is the luminance difference between a QR code's dark and light modules. Decoders need a clear threshold; the practical floor is about 40%…