How to svg vs raster qr codes: format comparison for print and digital
- Step 1Name the primary context — Print at any size, signage, or anything you might enlarge later: choose SVG. On-screen only and inside an environment that may not accept SVG (email, some CMS): choose PNG. Both: keep the SVG as your master and rasterise to PNG on demand.
- Step 2Generate the vector master first — Make the code with the JAD SVG generator regardless of final format. Set the data, error-correction level, size, and the two solid colours. The vector file is your source of truth — every PNG you ever need can be exported from it cleanly.
- Step 3Rasterise only when a context requires it — If a destination cannot take SVG, convert the SVG to PNG with /svg-tools/svg-canvas-exporter at the exact pixel size that destination needs. Because it renders from vector geometry, the PNG has crisp module edges at whatever resolution you pick.
- Step 4For inline web embedding, consider a data URI — To avoid an extra HTTP request for a small on-page code, turn the SVG into a CSS/HTML data URI with /svg-tools/svg-css-data-uri or a base64 string with /svg-tools/svg-to-base64. This keeps the vector crispness while inlining the asset.
- Step 5Verify contrast and quiet zone in the final format — Whichever format you ship, confirm a 3:1+ contrast ratio and that the white quiet zone is intact. The generator uses a 2-module margin, so add layout padding if the code sits on busy artwork.
- Step 6Test scan the shipped artifact — Print or render the actual deliverable and scan it with more than one app. Format never changes scanability on its own, but rasterising too small, or low contrast, can — test the thing you will actually publish.
SVG vs PNG QR codes, head to head
Practical differences. SVG is the JAD generator's native output; PNG is what you export when a context demands raster.
| Dimension | SVG (vector) | PNG (raster) |
|---|---|---|
| Scaling | Sharp at any size from card to billboard | Sharp only near native resolution; blurs when enlarged |
| Print DPI math | None — resolution-independent | Must compute pixels for target size at 300 DPI |
| Email clients | Mostly unsupported | Widely supported |
| File size for a code | Small text; grows with module count | Fixed by pixel dimensions |
| Editing colours later | Edit path fills directly | Re-export from source |
| Logo overlay | Composite in a vector editor | Composite in a raster editor |
Minimum PNG pixels for common print sizes (300 DPI)
If you must ship PNG, these are baseline pixel dimensions. SVG sidesteps this table entirely. Render at 2–4x for safety margins.
| Printed size | At 300 DPI | Recommended export (2x) |
|---|---|---|
| 2 x 2 cm | 236 x 236 px | 472 x 472 px |
| 3 x 3 cm | 354 x 354 px | 708 x 708 px |
| 5 x 5 cm | 591 x 591 px | 1182 x 1182 px |
| 10 x 10 cm | 1181 x 1181 px | 2362 x 2362 px |
Pick a format by destination
Concrete recommendation per channel, with the JAD tool to use.
| Destination | Use | How |
|---|---|---|
| Poster / signage / packaging | SVG | JAD SVG generator, place in InDesign/Illustrator |
| Web page (inline) | SVG or data URI | Inline, or /svg-tools/svg-css-data-uri |
| Email newsletter | PNG | Generate SVG, export via /svg-tools/svg-canvas-exporter |
| OG / social preview image | PNG | Rasterise the SVG to the platform's pixel spec |
| Legacy CMS that rejects SVG | PNG | Export PNG at the size the CMS needs |
Cookbook
Decision recipes for the contexts people actually hit. Each names the format, the settings, and the JAD sibling tool that does the conversion if one is needed.
Billboard or large poster
The textbook SVG case — scale is unbounded and quality must hold.
Format: SVG (no rasterising) Generator: error correction M or Q, size 1024px Place the .svg directly in Illustrator/InDesign Resize to any physical dimension — modules stay crisp
Email newsletter code
SVG will not render in most inboxes — ship PNG.
1) Generate the SVG master (level M) 2) /svg-tools/svg-canvas-exporter → PNG at 600x600 (1200x1200 for Retina) 3) Add alt text containing the URL as an image-blocked fallback
Inline code on a marketing landing page
Keep vector sharpness, avoid an extra request.
Generate SVG (level L, on-screen)
/svg-tools/svg-css-data-uri → background-image:url("data:image/svg+xml,...")
or /svg-tools/svg-to-base64 for an <img src> data URIBoth a printed flyer and a website
One vector master serves both channels.
Master: SVG (level M) Print: place the .svg in the flyer artwork Web: inline the same .svg, or rasterise per use Result: identical code, two channels, one source file
Tiny on-screen utility code
At ~64–96px a raster is fine — but generate vector anyway so you can grow it later.
Generate SVG at 96px, level L If the widget needs PNG: export 96x96 (or 192x192 @2x) Keep the SVG so a future redesign can enlarge it freely
Edge cases and what actually happens
SVG dropped into an email template
UnsupportedMost email clients block or fail to render SVG images. Convert to PNG with /svg-tools/svg-canvas-exporter before sending, and include the destination URL in alt text.
PNG scaled up from a small source
Scan riskEnlarging a low-resolution PNG blurs the modules; decoders may fail. Re-export the PNG from the SVG master at the larger size instead of scaling the bitmap.
Expecting JAD to output PNG directly
By designThe QR generator outputs SVG only. To get a PNG, rasterise the downloaded SVG with /svg-tools/svg-canvas-exporter at your chosen pixel size.
CMS rejects .svg uploads
WorkaroundSome platforms block SVG uploads as a security policy. Export a PNG from the SVG and upload that, or paste an inline data URI if the CMS allows raw HTML.
Reversed colours (light on dark)
Scan riskInverted codes affect both formats equally — many older scanner apps cannot read them. Use dark-on-light regardless of SVG or PNG.
Gradient requested in either format
Not supportedThe generator only takes solid foreground and background colours. A gradient must be hand-added to the SVG and must preserve module contrast, or scanning breaks.
Quiet zone cropped during layout
Scan riskTrimming the white border to fit a tight layout removes the boundary scanners rely on. The 2-module margin is already minimal — add padding, never remove it.
JPEG used for a QR code
AvoidJPEG's lossy compression introduces artefacts around the sharp module edges. If you must ship raster, use PNG (lossless) exported from the SVG, not JPEG.
Frequently asked questions
Is an SVG QR code more reliable to scan than PNG?
Not inherently — scanners read rendered pixels, so at the same displayed size both scan identically. SVG's advantage is that it stays sharp when you change size, while PNG degrades if enlarged past its native resolution.
What minimum PNG resolution does a printed code need?
At 300 DPI, a 2cm code needs about 236px and a 5cm code about 591px. Export at 2–4x those values for clean edges. SVG removes this calculation because it renders sharp at print resolution automatically.
How do I get a PNG from JAD's SVG generator?
Generate the SVG, then rasterise it with /svg-tools/svg-canvas-exporter at whatever pixel size you need. It renders from the vector geometry, so the PNG has crisp modules at any resolution.
Can I inline an SVG QR code on a web page without a separate file?
Yes — paste the SVG markup directly, or convert it to a data URI with /svg-tools/svg-css-data-uri (for CSS) or /svg-tools/svg-to-base64 (for an <img src>). You keep vector sharpness and avoid an extra HTTP request.
Why does the JAD tool only output SVG?
It is purpose-built for the resolution-independent case where vector wins — print, signage, and scalable web use. When you need raster, the conversion is one step away via the canvas exporter, so the workflow stays vector-first.
Do colour choices matter equally in SVG and PNG?
Yes. Both need a foreground/background contrast of at least 3:1 and, for broad compatibility, dark-on-light. The format does not change these requirements.
Can either format use a gradient fill?
The generator only accepts solid colours. You could hand-edit gradients into the SVG, but you must keep every module distinguishable from the background or scans fail. PNG inherits whatever the SVG renders.
Is SVG smaller than PNG for a QR code?
Usually for typical sizes, since SVG is compact text whose size grows with module count, while PNG size is fixed by pixel dimensions. For tiny codes the difference is negligible; for large print codes SVG is far smaller than an equivalently sharp PNG.
Should I ever use JPEG for a QR code?
No. JPEG compression smears the hard module edges. If raster is required, use PNG exported from the SVG master.
Which format for social/OG preview images?
PNG, sized to the platform's spec. Generate the SVG, then rasterise it to the exact OG dimensions with the canvas exporter.
Does enlarging an SVG ever hurt scanning?
No — the geometry is resolution-independent, so a larger render is simply a larger sharp code. The only scale risk is going too small for the camera, which applies to both formats.
What is the single best default workflow?
Generate SVG as your master, keep it, and rasterise to PNG only for channels that demand it (email, OG, legacy uploads). This gives you one source file that serves print, web, and raster needs.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.