How to svg qr code generator: create scalable vector qr codes free
- Step 1Type or paste your data — Enter the content in the Data / URL textarea. It is encoded verbatim — a URL like https://jadapps.com, plain text, or a raw structured string such as WIFI:T:WPA;S:Net;P:pass;; if you want a WiFi join code. The tool does not build structured payloads for you; type the exact string a scanner should receive.
- Step 2Pick an error-correction level — Choose from the dropdown: L — 7% for clean digital screens, M — 15% (the default, good general choice), Q — 25% for print, H — 30% if you plan to overlay a logo yourself afterward. Higher levels add redundancy, which makes the code denser (more modules) for the same data.
- Step 3Set the rendered size — Drag the Size slider (64–1024px, 32px steps, default 320). This is the pixel width/height written into the SVG's width/height attributes; because the output is vector, you can still rescale it freely later in any design tool without quality loss.
- Step 4Choose foreground and background colours — Use the Foreground and Background colour pickers. These are native HTML colour inputs, so only solid hex colours are possible — no gradients. Keep strong contrast: a dark foreground on a light background scans most reliably across all apps.
- Step 5Generate and preview — The tool builds the QR in-browser and shows a preview alongside metrics (the encoded data, the ECC level, and the size). Verify the preview scans with your own phone before you commit to it.
- Step 6Download the SVG — Download the result as qr-code.svg. Drop it inline on a web page, use it as an <img> source, or open it in Illustrator or Inkscape to place into a print-ready document. Do not crop the white border — that quiet zone is part of the scannable code.
The five controls (and only these five)
Every option the tool exposes, with its real default and range from the schema and client. There is no logo upload, no data-type picker, and no gradient support.
| Control | Schema key | Type | Default | Range / values |
|---|---|---|---|---|
| Data / URL | qrData | string (textarea) | https://jadapps.com | any text, encoded literally |
| Error correction | qrEcc | enum | M | L, M, Q, H |
| Size | qrSize | number (slider) | 320 | 64–1024px, step 32 |
| Foreground | qrFg | colour | #000000 | any solid hex |
| Background | qrBg | colour | #ffffff | any solid hex |
Error-correction levels and what they cost
Recovery percentages match the QR spec. Higher recovery means more redundancy modules, so the same payload produces a larger (denser) code.
| Level | Recovery | Dropdown label | Best for | Effect on density |
|---|---|---|---|---|
| L | ~7% | L — 7% (digital screens) | On-screen, clean conditions, max data per version | Smallest code |
| M | ~15% | M — 15% (default) | General use, web and most print | Balanced (default) |
| Q | ~25% | Q — 25% (print) | Printed materials that may scuff | Larger code |
| H | ~30% | H — 30% (with logo overlay) | Codes you will overlay a logo on yourself | Largest code |
What the generated SVG actually contains
Real structure verified against the qrcode-library output the tool post-processes. The viewBox is in module units; width/height are then forced to your chosen pixel size.
| Element / attribute | Value | Notes |
|---|---|---|
| Background | <path fill> covering the whole viewBox | Painted with your background colour |
| Modules | single <path stroke> for all dark squares | Painted with your foreground colour |
| viewBox | 0 0 N N (N = version modules + 4) | Includes a 2-module quiet zone on each side |
| shape-rendering | crispEdges | Keeps module edges sharp when rasterised |
| width / height | your qrSize value | Re-written by the tool after generation |
Cookbook
Five concrete starting points. Paste the data shown, set the listed controls, and download. Remember the Data / URL box is literal — these payloads work because the exact string is what a scanner expects.
A simple website QR for a slide deck
On-screen, clean conditions, smallest possible code: level L is ideal.
Data / URL: https://jadapps.com Error correction: L — 7% (digital screens) Size: 320px Foreground: #000000 Background: #ffffff → qr-code.svg, version 3 (25 modules + quiet zone)
A WiFi join code (raw payload)
The tool has no WiFi form — you type the standard WIFI: string yourself.
Data / URL: WIFI:T:WPA;S:CafeGuest;P:latte2026;; Error correction: M — 15% (default) Size: 512px → scanning on iOS/Android offers a one-tap network join
A vCard contact for a name badge
Paste a complete vCard 3.0 block as the literal data string.
Data / URL: BEGIN:VCARD VERSION:3.0 N:Doe;Jane TEL:+15551234567 EMAIL:jane@example.com END:VCARD Error correction: M — 15% (default) Size: 400px
Brand-coloured code on a coloured background
Solid hex only — keep at least a 3:1 contrast or scans fail.
Data / URL: https://shop.example.com/launch Foreground: #0b1f3a (deep navy) Background: #f2f6ff (near-white) Error correction: M Size: 600px
Print-grade code you will logo-stamp yourself
Level H buys headroom; you composite the logo in your design tool — the generator does not embed images.
Data / URL: https://go.example.com/spring Error correction: H — 30% (with logo overlay) Size: 1024px → open in Illustrator, place logo over the centre, keep it under ~30% area, retest
Edge cases and what actually happens
Data / URL left empty
RejectedThe generator throws "QR data cannot be empty." when the field is blank or whitespace-only. Type at least one non-space character.
You expected a WiFi or vCard wizard
By designThere is no structured-type dropdown. The textarea is encoded literally. Build the WIFI: or vCard string yourself (see the cookbook), or use the raw text — anything else just encodes the words you typed.
You wanted to upload a logo into the code
Not supportedThe tool draws no logo and adds no image. Choose level H for redundancy, download the SVG, then overlay your logo manually in Illustrator, Inkscape, or inline SVG markup, keeping coverage under ~30%.
You picked a gradient foreground
Not supportedForeground and background are native colour inputs that hold one solid hex each. For a gradient look you would have to edit the downloaded SVG's path fill by hand — and you must keep contrast high enough to scan.
Quiet zone looks thin
ExpectedThe tool uses a 2-module margin (the spec recommends 4). It scans well in practice, but if you place the code against busy artwork, add extra white padding around it in your layout so scanners can isolate the boundary.
Size set above 1024 or below 64
ClampedqrSize is bounded to 64–1024px and the slider steps in 32px increments. Because the output is vector, you can rescale the file afterward to any dimension with no quality loss.
Very long data string
Denser codeLong URLs and big payloads push the code to a higher QR version with many small modules, which is harder for cameras to resolve. Shorten the URL or use a redirect so the printed code stays low-version and easy to scan.
Low-contrast colour pair
Scan riskForeground and background too close in luminance (e.g. dark blue on navy) breaks decoding. Aim for at least a 3:1 contrast ratio and keep the foreground darker than the background.
Reversed (light on dark)
Scan riskPutting a light foreground on a dark background is allowed by the colour pickers but many older scanner apps cannot read inverted codes. Prefer dark-on-light for maximum compatibility.
Frequently asked questions
Why use SVG for QR codes instead of PNG?
SVG QR codes are vector geometry, so the same file is mathematically sharp at 5cm on a card and 5m on a banner. PNG codes captured small and scaled up blur their modules and can fail to scan. If you need a PNG later, rasterise the SVG at any resolution you like with /svg-tools/svg-canvas-exporter — no quality loss because it renders from the vector source.
Is the tool free?
Yes. Its minTier is free, and generation runs entirely in your browser with no upload and no account required. Every error-correction level, colour, and size is available on the free tier.
What is the real quiet zone around the code?
The generator uses a 2-module margin on each side. The QR spec recommends 4 modules, so when placing the code on busy artwork, add a little extra white space around it in your layout. Never crop the white border that the tool already includes.
Can I build a WiFi or vCard QR with this tool?
Yes, but you must supply the raw payload string yourself — there is no form. For WiFi, paste WIFI:T:WPA;S:NetworkName;P:password;; and for a contact, paste a full BEGIN:VCARD…END:VCARD block. The tool encodes exactly what you type.
Can I embed a logo in the centre?
Not from this tool — it draws only the QR and a background. Generate at level H for the 30% redundancy headroom, download the SVG, then composite your logo over the centre in a design tool, keeping it under roughly 30% of the area and retesting scans.
Do gradients work?
No. The colour pickers accept a single solid hex for foreground and background. A gradient would require hand-editing the SVG path's fill, and you must keep contrast high enough that every module stays distinguishable.
What size should I export?
Size (64–1024px) only sets the width/height baked into the SVG; vector output rescales freely afterward. Pick something convenient like 320 or 512, and rely on the vector nature for print scaling. For raster targets, set the final pixel size when you export to PNG.
What is the maximum data capacity?
QR version 40 can hold up to 4,296 alphanumeric characters or 2,953 bytes at level L, but that produces a 177×177-module code that mobile cameras struggle with. Keep printed payloads short — under a few hundred characters — and use a redirect for long URLs.
Does higher error correction make the code bigger?
Yes. More recovery (Q, H) means more redundancy modules, so the same data jumps to a higher version with more, smaller squares. We measured an 78-character URL go from 37 modules at M to 49 modules at H. Use H only when you actually need the damage tolerance.
What file is downloaded?
A single SVG named qr-code.svg containing a background path, one path for all dark modules, a viewBox in module units, and your chosen width/height. It is standards-compliant and opens in any browser or vector editor.
Does the SVG file format affect whether it scans?
No. Scanners read the rendered pixels from a camera, not the source format. An SVG rendered on screen and a PNG at the same size produce identical pixel data to the scanner. See /svg-tools/guides/svg-qr-code-scanner-compatibility-guide for the details.
Can I generate many codes at once?
The web tool makes one code per run. For bulk generation, the QR tool is runner-backed (engine mode), so a paired @jadapps/runner can produce codes in a loop locally — 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.