Shapes against pixels
A PNG stores a grid of pixels. Blow it up and the software guesses what belongs between them, which softens every edge. An SVG stores instructions: draw a square here, this size, this color. Ask for it at 2 cm or 2 m and it draws cleanly at either.
Why a QR code cares more than a photo does
A scanner reads a QR code by sampling a grid and deciding whether each cell is light or dark. Soft edges push cells toward the middle grey, and cells near the middle are where decoding starts to fail. A slightly blurry photo still looks like the photo. A slightly blurry QR code stops being a QR code.
This is worse for dense symbols. A long payload, like a vCard record or a URL with parameters, needs more modules in the same physical square, so each module is smaller and each soft edge covers a larger share of it.
Picking by destination
| Where the code goes | Format | Why |
|---|---|---|
| Business card, flyer, packaging | SVG | The printer scales it to the layout with no loss |
| Poster, window sticker, signage | SVG | Large sizes are exactly where a PNG falls apart |
| Design file in a vector editor | SVG | Editable shapes, recolorable, no resampling |
| Email signature | PNG | Mail clients handle raster images far more predictably |
| Slide deck or a screenshot | PNG | Fixed display size, no scaling involved |
| Someone else's CMS upload field | PNG | Some systems reject SVG uploads on principle |
Working with the SVG
- Place it, do not paste a screenshot of it Import the file into the layout tool. Copying a preview image throws away the vector data and leaves you with pixels again.
- Recolor with care Any vector editor changes the module color. Keep dark modules on a light background. Reversed codes and low-contrast pastel pairs fail on real readers.
- Do not stretch one axis Scale both dimensions together. A stretched code is a broken grid, and no error correction repairs geometry.
- Keep the quiet zone The blank margin belongs to the symbol. Cropping tight to the modules is the most common way a beautiful layout stops scanning.
If you must use the PNG
Export at the pixel size the final layout needs, or larger, and never scale it up afterwards. Scaling down is usually safe. Scaling up is where blur comes from.
Do not run the PNG through a lossy compressor. JPEG artifacts cluster around hard black and white edges, which is every edge in a QR code. If you need the file smaller, our image compressor re-encodes PNG losslessly and discards the result when it is not actually smaller.
The check that runs on both
Vaultaire builds the PNG and the SVG from the same payload, then decodes each finished file again with a separate reader. The download unlocks only after the decoded text matches what you reviewed. That catches a corrupted render before it reaches a print run. It cannot tell you whether the final layout kept the quiet zone, so scan the proof yourself.
SVG and PNG FAQ
SVG or PNG?
SVG for anything printed or resizable: posters, packaging, cards, signage, design files. PNG for a fixed spot on a screen, like an email signature or a slide.
Is an SVG QR code higher quality?
It has no resolution at all. It describes the modules as shapes and renders at whatever size you ask. A PNG has a fixed pixel grid and softens past it.
Can I change the color?
Yes, in any vector editor, and the file stays sharp. Keep modules dark on a light background. Inverted or low-contrast codes fail on some readers regardless of format.
Why does my printed code look blurry?
A PNG was scaled up past its pixel grid, so the printer invented detail at the module edges. Print the SVG, or export a PNG at the exact size the layout needs.
Do printers accept SVG?
Most do, and every layout tool imports it. If a printer wants PDF or EPS, place the SVG in a design tool and export from there. The shapes survive.
Can I convert the PNG to SVG later?
Tracing a raster code back to vector guesses at edges that were already soft. Generate the SVG from the payload instead. It takes a second and the geometry is exact.