SVG vs PNG
- SVG (vector): made of shapes, not pixels, so it’s razor-sharp at any size, from a sticker to a billboard. Best for professional print and designers. You can also recolor it in design tools.
- PNG (image): works everywhere: Word, PowerPoint, Google Docs, websites. Choose 2048 px or 4096 px for large prints.
Transparent QR codes
Turn on Transparent background and the light squares become see-through, so the code sits on your design without a white box. Only do this on a light, plain area: QR codes need strong contrast between dark modules and the background to scan.
Designer tips
- Keep a quiet zone (empty margin) of at least 2 modules around the code.
- Don’t stretch it. Always scale proportionally.
- Outline or flatten the SVG before sending to some print shops.
How the SVG is made
The SVG file describes each square of the code as a shape with an exact position, instead of storing pixels. Print software draws those shapes at whatever size the job needs, so the edges stay sharp on a business card and on a banner. The file is plain text and small, and design tools can recolour or regroup it.
Using the SVG in common tools
- Figma: drag the file onto the canvas. It arrives as a vector you can resize.
- Illustrator and Affinity Designer: open or place it, then scale with the proportions locked.
- Canva: upload it like an image. Canva accepts SVG uploads.
- Inkscape: open it directly. SVG is Inkscape’s own format.
- Word, Google Docs and email: a large PNG is the safer choice.
When to use a transparent PNG
A transparent PNG is handy when a tool doesn’t accept SVG, or when you need to place the code on a coloured panel in slides or on a web page. Download it at 2048 px or larger for print. Make sure the colour behind it is light and plain, since the see-through parts take on whatever is underneath.
Check it at the final size
Vector files scale down as easily as up. Before printing, check the code’s final printed width and scan a test print. Small codes with long links need more space than you might expect.