SVG QR CODE EXPORT
Export a QR code as SVG, not a bitmap in a wrapper
Mosaqo draws every code as geometry, and the SVG export is that drawing written out as a file. One module is one rectangle, the quiet zone is part of the canvas, and the colours are plain hex values in the markup — so the same file serves a business card and a building.
QUICK OVERVIEW
What this changes in practice
01
What is actually inside the file
The export is a single SVG element with a stated width and height and a viewBox measured in modules. Every dark module is a one-by-one rectangle at integer coordinates, and the three finder patterns are drawn as their own shapes, so the corner style stays independent of whether the modules are square, rounded or dotted. Nothing is traced from a bitmap, because nothing was ever a bitmap.
The quiet zone is part of the canvas rather than something to remember later: the viewBox is the code plus the margin you chose, four modules by default and up to sixteen. A transparent background is written as no backdrop rectangle at all, which is what lets the file sit on coloured stock without a white box around it.
- One rectangle per module, at integer coordinates
- Quiet zone included in the viewBox
- Foreground and background as six-digit hex values
- No backdrop rectangle when the background is transparent
02
Vector is about edges, not file size
A scanner reads the boundary between a dark module and a light one. Scaling a small PNG up softens every one of those boundaries, and a soft boundary is ambiguous data — which is why an upscaled code fails at a size the same code survives when it was exported as vector. An SVG has no resolution to lose in the first place.
That is also why one file covers every placement. What goes on the invitation is what goes on the poster: the printer scales it, and the module edges stay exactly where the geometry puts them.
03
Where a designed card stops being pure vector
A bare code is vector throughout. A card is vector wherever it can be — the matrix keeps its geometry, and shapes, backgrounds and gradients stay shapes.
Two things cannot make that trip. A photograph or an uploaded logo has no vector form, so it travels inside the SVG as a high-resolution raster image. Text stays live text with a font family named on it, which means a machine without that font substitutes another and the line changes width. When the typography has to be exact, set it in the layout tool and export the code on its own.
A card exported as PDF is flattened to a single high-resolution image on the page — a composition of photographs cannot be anything else — and Mosaqo renders it well above 300 dpi at A4 so it is press-ready regardless. It is only the bare code, in SVG or PDF, that reaches the page as geometry.
- The QR matrix: vector geometry
- Uploaded photos, logos and stickers: embedded raster
- Text: live text, so keep the font or set the type in your layout
04
What the PNG and PDF exports are for
PNG is the right answer for a screen, an email or a slide — anywhere the code is placed once at a size you already know. Export it generously large and never scale it up afterwards.
The PDF is the same geometry on a page: the code drawn — not rasterised — and centred on A4, ready to print or hand to somebody as it stands. It has no resolution either, so enlarging the page enlarges the code without softening a single edge. Send the SVG instead when the code has to go inside a layout somebody else controls, at a size only they know.
05
Recolouring and placing the file
Because the file is text, its colours are editable without opening a design tool: the fill on the modules is the foreground you picked, and the backdrop rectangle is the background. Keep the conventional direction — dark modules on a light ground. Inverted codes are read by many scanners and not by all of them, which makes them a gamble on anything printed.
When you place the file, keep the quiet zone clear and resist effects that soften edges: drop shadows, blend modes, transparency over busy artwork. A code standing on a photograph fails for the same reason a blurred one does.
06
Test the file you exported, not the preview
Open the exported SVG, place it at final size in the real layout, print one on the actual stock and scan it on two different phones at the distance a reader will hold it, in the light the placement really has.
The editor checks contrast, quiet zone and payload density while you work, and those checks catch most problems before they reach a press. What they cannot see is the varnish, the fold and the light in the room.
FAQ
Frequently asked questions
Is the SVG a real vector file or a picture of a code?
Real vector. Each module is a rectangle in the markup and the finder patterns are their own shapes, so the file scales to any size without losing an edge. Nothing in a bare code export is rasterised.
Can I change the colours in the exported file?
Yes. The foreground and background are six-digit hex values in the markup and can be edited in any text or design tool. Keep dark modules on a light background — inverting a code is what most often breaks a scan.
Why does my exported card contain an embedded image?
Because a photograph or an uploaded logo has no vector form. The matrix stays vector geometry; the picture travels as a high-resolution raster inside the same SVG.
Should I send a printer the SVG or the PDF?
Either — both are vector. The PDF is a finished A4 sheet with the code drawn on it, which suits a press that wants a page. The SVG is the code alone, which suits a designer placing it inside a layout. What no printer should be sent is a raster scaled up from a small one.
Does the SVG include the quiet zone?
Yes. The margin you set — four modules by default — is part of the canvas, so placing the file edge to edge in a layout does not eat the code’s breathing room.
NEXT STEP