SVG QR Codes: How to Generate a Scalable QR Code for Print and Web

Most QR code generators produce a PNG image. PNG is fine for screen use, but print a PNG QR code on a banner or a product label and you risk blurry, hard-to-scan results. SVG solves this problem completely. An SVG QR code is a mathematical description of shapes, not a grid of pixels, so it prints perfectly at any size.

Why generate a QR code as SVG?

• Resolution-independent: the same file prints sharply on a business card and a 3-metre banner
• Smaller file size than a high-resolution PNG
• Editable: open in Figma, Illustrator or Inkscape to add a logo, change colors or adjust the quiet zone
• CSS-styleable: embed inline in HTML and control colors with CSS variables
• No pixelation at any zoom level in any viewer

What can a QR code encode?

QR codes can encode any text string. The most common use is a URL, but the format is flexible.

• Website URL: link to any page, form or landing page
• Plain text: any message or short content
• Email address (mailto:): opens the mail client with the address pre-filled
• Phone number (tel:): taps to dial on mobile
• Wi-Fi credentials (WIFI:): lets users join a network by scanning
• vCard contact data: saves contact information directly to the phone

Error correction levels explained

QR codes include redundant data so they can still be scanned even when part of the code is damaged, covered or obscured. The error correction level controls how much redundancy is added. More redundancy means a more reliable code but also a more complex (denser) pattern.

• L (7%): minimum redundancy, smallest QR code, ideal for digital-only use where damage is unlikely
• M (15%): recommended default, good balance of size and reliability for most uses
• Q (25%): suitable for print on textured surfaces or when part of the code may be obscured
• H (30%): maximum redundancy, allows a logo or artwork to be placed in the center of the QR code

How to create an SVG QR code

1. 1Open the SVGcreator SVG QR Code Generator.
2. 2Enter the URL or text you want to encode.
3. 3Choose a foreground and background color, or enable transparent background.
4. 4Select your error correction level (M is a safe default for most uses).
5. 5Adjust the quiet zone margin (the white border around the code) using the slider.
6. 6Click Download SVG to save the file, or Copy SVG to paste the code directly.

Tips for using QR codes in print

• Always test scan the QR code before sending to print, use multiple phones and apps
• Ensure sufficient contrast between foreground and background (dark on light works best)
• Keep a quiet zone of at least 4 modules (the white border) around the code
• For outdoor signage, use error correction level Q or H to handle partial damage
• Avoid placing the QR code on a curved surface or a reflective material

Privacy

The QR code is generated entirely in your browser using the qrcode library. Your URL or text is never sent to a server. No account is required and nothing is stored after you close the tab.