SVG QR Code Generator
Generate a QR code as pure SVG — scalable, colorable, and ready to embed in any web page or design tool.
Preview
SVG scales to any size without losing quality.
Why SVG for QR codes?
Most QR code generators export PNG images. SVG QR codes are infinitely scalable — they look sharp on a business card printed at 300 dpi and on a billboard at 10 metres. Because SVG is plain XML text, you can embed it directly in HTML without a separate file request, restyle it with CSS, or animate it. SVG QR codes also compress better than PNG for the same visual size.
Which error correction level should I choose?
L (Low) creates the smallest, least-dense code — good for short URLs in ideal conditions. M (Medium) is the default and works for most uses. Q (Quartile) is a good choice if you plan to place artwork in the centre of the QR code. H (High) gives the most redundancy; the code still scans even if up to 30% of it is obscured, but the result is denser and needs a larger print size.
Frequently Asked Questions
Can I use a transparent background?+
Yes. Set the background color to any value, then manually edit the downloaded SVG and change the background fill to none or transparent. QR code scanners require sufficient contrast between the dark modules and the surface they are printed on, so test scanning before publishing.
Can I add a logo to the centre?+
Yes — embed an <image> or <g> element centred in the SVG markup after downloading. Use H (High) error correction so the code still scans with up to 30% obscured. Keep the logo under ~25% of the total area.
Is my text or URL sent to a server?+
No. All QR code generation happens in your browser using JavaScript. Your URL or text never leaves your device.
What is the quiet zone?+
The quiet zone is a blank margin around the QR code required by the spec for scanners to locate the code boundary. The minimum is 4 modules (the small squares that make up the code). Reducing it below 4 may cause scanning failures, especially if the QR code is placed close to other graphics.
Related Tools
How to use
- Enter any URL or text — the QR code updates as you type.
- Use the color pickers to set foreground and background colors.
- Choose an error correction level — use H if you plan to add a logo overlay.
- Adjust the quiet zone (minimum 4 recommended for reliable scanning).
- Click Copy SVG to copy the markup, or Download .svg to save the file.