How to svg qr codes for marketing and print campaigns: best practices
- Step 1Set physical size, not pixels — Decide the printed size for the scan distance: about 2x2cm for arm's length, 3x3cm for a poster at 1m, 5x5cm or larger for signage at 2m. Generate the SVG, then size it in your layout — vector means any of these is pixel-perfect.
- Step 2Choose error correction for the environment — Indoor flyer or screen-adjacent: L or M. Anything that gets handled, scuffed, wet, or sun-faded (packaging, outdoor posters): Q or H for damage tolerance. Remember H makes the code denser, so do not over-spec it for clean indoor use.
- Step 3Use solid, on-brand colours with real contrast — The pickers take one solid hex each for foreground and background — no gradients. Keep the foreground dark and the background light with at least 3:1 contrast. Brand navy on near-white scans; pale-on-pale does not.
- Step 4Composite a logo only if you need one — The generator does not embed images. If brand wants a logo in the code, set level H, download the SVG, and place the logo over the centre in Illustrator under ~30% area — then retest scanning before sign-off.
- Step 5Write a clear call to action — Print a reason to scan beside the code: 'Scan for the menu', 'Scan to book a free trial', 'Scan to see it in AR'. A bare code gets ignored; a code with a payoff gets scanned.
- Step 6Encode a trackable URL and test — Point the code at a redirect URL with UTM tags so you can measure scans. Then print a proof and scan it under the real lighting and finish (matte beats glossy for glare) with more than one phone before the run.
Minimum printed size by scan distance
Practical minimums; bigger is always safer. SVG renders any of these sharply because size is set in layout, not pixels.
| Context | Scan distance | Minimum size | Suggested ECC |
|---|---|---|---|
| Business card / flyer | 30–50 cm (arm's length) | 2 x 2 cm | M |
| Poster | ~1 m | 3 x 3 cm | M or Q |
| Packaging | handheld, variable | 2.5 x 2.5 cm | Q or H |
| Outdoor signage | ~2 m | 5 x 5 cm+ | H |
| Menu board / banner | 1–2 m | 10–15 cm+ | Q or H |
Error correction by campaign surface
Match recovery to how rough the surface's life will be. Higher levels add modules, so reserve H for genuinely harsh conditions or planned logo overlays.
| Surface | Hazard | Recommended level | Why |
|---|---|---|---|
| Indoor flyer / card | Light handling | L or M | Clean, keep the code low-version |
| Retail packaging | Scuffs, glare, wear | Q or H | Survive damage and reflections |
| Outdoor poster | Rain, sun fade | H | Maximum redundancy |
| Code with logo overlay | Up to ~30% covered | H | Headroom for the obscured centre |
Print pitfalls and the fix
The avoidable mistakes that tank scan rates, mapped to what the JAD tool does and does not do.
| Pitfall | Effect | Fix |
|---|---|---|
| Code too small | Camera cannot resolve modules | Hit the minimum size table; enlarge |
| Glossy finish | Glare overexposes modules | Matte laminate, bigger code, level H |
| Low contrast brand colours | Decoder fails | Dark-on-light, 3:1+ contrast, solid hex |
| Quiet zone cramped by artwork | Boundary not detected | Add white padding (margin is only 2 modules) |
| No call to action | Nobody scans | Add a benefit-led CTA next to the code |
Cookbook
Campaign-ready setups. Each lists the generator settings and the layout/CTA work around them, with the right JAD sibling tool when you need a raster export.
Business-card code
Small but reliable at arm's length, brand-coloured but high-contrast.
Data / URL: https://go.brand.com/card?utm_source=card Error correction: M Size: 320px (place at 2x2 cm in layout) Foreground: #11233a Background: #ffffff CTA beside it: "Scan to connect"
Outdoor poster code
Big, robust, maximum redundancy for rain and sun.
Data / URL: https://go.brand.com/spring?utm_medium=poster Error correction: H Size: 1024px (place at 5x5 cm+) Matte finish; CTA above: "Scan to win"
Packaging code with brand logo
Tool can't embed the logo — composite it after at level H.
Generate: level H, size 600px Foreground: #000000 Background: #ffffff In Illustrator: place logo over centre, <30% area Retest scan; finish matte to cut glare
Menu QR for a table tent
Mid-distance, trackable, easy to read.
Data / URL: https://go.cafe.com/menu?utm_campaign=tabletent Error correction: Q Size: 512px (place at ~4 cm) CTA: "Scan for today's menu"
Email-ready version of a print code
SVG won't render in inboxes — rasterise it for the email blast.
Generate the campaign SVG (level M) /svg-tools/svg-canvas-exporter → PNG 600x600 (1200x1200 Retina) Add alt text with the URL for blocked-image clients
Edge cases and what actually happens
Code printed under ~1.5cm
Scan riskBelow practical minimums the camera cannot resolve the modules, especially in poor light. Use the size table — 2cm is the floor for arm's-length scanning, larger for distance.
Expecting to upload a logo in the tool
Not supportedThe generator draws no logo. Use level H, then composite the logo over the centre in your design tool under ~30% coverage and retest.
Brand wants a gradient code
Not supportedOnly solid foreground/background colours are available. Hand-editing a gradient into the SVG risks breaking module contrast — usually not worth it for print scan reliability.
Glossy packaging in sunlight
Scan riskSpecular glare overexposes parts of the code. Use a matte finish, enlarge the code, and pick level H so partial loss still decodes.
Tight layout crops the white border
Scan riskThe quiet zone is only a 2-module margin here, so it is already minimal. Add white padding around the code in the layout; never trim it to fit.
Code printed but URL not trackable
AvoidWithout a redirect/UTM URL you cannot measure the campaign. Encode a trackable URL before printing — you cannot add tracking after the run.
No call to action next to the code
Low scansBare codes get ignored. People scan when they know the payoff. Add a short benefit-led CTA adjacent to the code.
Long URL makes a dense code
Scan riskLong destinations push the code to a high version with tiny modules that print and scan poorly. Use a short redirect domain so the printed code stays low-version.
Reversed colours for a dark design
Scan riskLight-on-dark suits some layouts but many older scanner apps cannot read inverted codes. Keep dark-on-light for the widest audience.
Frequently asked questions
What's the smallest a business-card QR code should be?
About 2x2cm for arm's-length scanning. Smaller can work in good light with good cameras but fails under sunlight or with cheap sensors. 2.5cm is safer and still leaves room for other content.
Which error-correction level for print?
Q or H for anything that gets handled, scuffed, wet, or sun-exposed; M for clean indoor flyers. H also gives the redundancy you need if you overlay a logo. Don't over-spec H for clean indoor use — it makes the code denser.
Can I print a coloured QR code on packaging?
Yes, with solid colours only and strong contrast. Keep the foreground dark and background light with at least 3:1 contrast, test under store lighting and sunlight, and prefer matte finishes to reduce glare.
Can I put my logo in the code?
Not via the tool — it embeds no images. Generate at level H, then composite your logo over the centre in Illustrator or Inkscape, keeping it under about 30% of the area, and retest scanning before printing.
Why does my code need a call to action?
Because a bare QR gives no reason to scan. A short, benefit-led line ('Scan for the menu', 'Scan to book') significantly lifts scan rates. Place it directly beside the code.
How do I measure scans from a print campaign?
Encode a redirect URL with UTM parameters (utm_source, utm_medium, utm_campaign) and read scans in your analytics. Use a distinct URL per format so you can compare flyer vs poster vs packaging.
Short URL or long URL in the code?
Short. Fewer characters means a lower QR version with larger modules that print and scan more reliably and let you change the destination later. For mission-critical runs, use your own short domain (go.brand.com) rather than a third-party shortener that could go offline.
Does the quiet zone need attention?
Yes. The tool bakes in a 2-module margin (the spec recommends 4), so on busy artwork add extra white padding around the code in your layout. Scanners need that border to find the code.
Glossy or matte finish for printed codes?
Matte. Glossy laminates create specular glare under sunlight or bright retail lighting that overexposes modules and breaks scans. If gloss is unavoidable, enlarge the code and use level H.
Can I use the same code for both print and email?
Keep the SVG as your master for print, then rasterise to PNG for email with /svg-tools/svg-canvas-exporter, since most inboxes don't render SVG. Add the URL in alt text for image-blocking clients.
What size should I export from the generator?
Size only sets the SVG's pixel width/height; vector rescales freely. Pick 512–1024px for headroom and set the real physical dimension in your layout. For raster deliverables, export at the destination's exact pixel spec.
How do I keep a set of campaign codes visually consistent?
Reuse the same foreground/background colours, error-correction level, and size across every code so the family looks deliberate. For many codes at once, see /svg-tools/guides/batch-qr-code-svg-generation-api.
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.