QR code SVG path structure

A QR code becomes SVG as path data on a square grid. UseQR merges every dark module into one path element with a single fill, uses integer coordinates at eight pixels per module, and sets shape-rendering to crispEdges on square styles, which is why the output has no anti-aliasing seams between modules.

Two ways to draw the same matrix

Given a matrix of dark modules, an SVG generator has a choice:

One <rect> per module. Simple to emit, miserable to use: a version 5 code has around 700 dark modules, so the file carries ~700 elements, each independently styled, parsed and rendered. Design tools grind on selection, and renderers anti-alias every rectangle's edges separately.

One <path> for everything. Concatenate every module's outline into a single d attribute and fill it once:

<path d="M32 32h8v8h-8z M48 32h8v8h-8z …" fill="#000000"/>

Each M…h…v…z run is one 8 × 8 module; thousands of modules become one element, one fill, one node in every tool that opens the file. This is the structure UseQR emits: the whole data region is a single path, with the three eyes drawn as separate paths (their ring shape uses fill-rule="evenodd" to punch out the hole) so eye colour and shape can be styled independently.

The seam problem, and the three-part fix

The classic defect in QR SVGs is a grid of hairlines between modules: visible on screen at some zoom levels, occasionally even in print. It is anti-aliasing: when adjacent shapes share an edge at a fractional coordinate, the renderer blends each shape's edge with the background separately, leaving a semi-transparent seam where they meet.

The fix is threefold, and all three parts appear in UseQR's output:

Integer coordinates. Modules are placed at (column + quietZone) × moduleSize with a default module size of 8 px and quiet zone of 4 modules: every square-module coordinate is a whole number, so edges land exactly on the pixel grid. (Curved styles round path coordinates to three decimals, precise enough that adjacent curves meet without gaps.)
One merged path. Sub-paths of a single filled path are composited together, not blended edge-by-edge against the background, so shared edges cannot produce seams.
shape-rendering="crispEdges" on the root, applied only for the square module style, telling renderers to prefer hard edges over anti-aliasing. Rounded, dot and organic module styles omit it, they want smooth curves, and their geometry does not tile edge-to-edge anyway.

The parts around the path

A complete generated file is small and predictable: an optional <defs> block (gradients, the logo's clipPath), a background <rect> (omitted entirely for transparent codes), the merged data path, three eye paths, then optional logo image and label text. The viewBox spans (modules + 2 × quietZone) × moduleSize, so the quiet zone is part of the document, not something the placing designer must remember to add.

One structural subtlety worth copying if you build your own: UseQR can emit an SVG Tiny 1.2 profile on request (no clipPath, no ARIA attributes, no shape-rendering), because print RIPs, cutters and older Illustrator versions silently drop full-SVG features they do not understand. Shipping markup a print shop's software ignores is how codes break between proof and product; the print rationale covers that hand-off.

How the same matrix becomes canvas pixels instead is on rendering a QR code from a matrix; and whatever the structure, /validate rasterising and decoding the result is the test that matters.

FAQ

Why does my QR code SVG have thin white lines between squares?

Anti-aliasing seams: adjacent shapes at fractional coordinates get their shared edges blended separately against the background. Fix it with integer module coordinates, merging modules into one path, and shape-rendering set to crispEdges.

Is one path better than many rects in a QR SVG?

Yes, for real use. One merged path means one element to style, faster parsing and rendering, no per-edge anti-aliasing between modules, and dramatically easier handling in design tools, a version 5 code is one node instead of roughly seven hundred.

What is shape-rendering crispEdges for?

It is an SVG hint telling renderers to favour sharp, unblended edges over anti-aliasing. On a square-module QR code it eliminates hairline seams; on rounded or dot styles it is omitted because those shapes should stay smooth.

Can I edit a QR code SVG in Illustrator or Figma?

You can recolour and scale it safely. Avoid reshaping or moving individual modules and never apply effects that shift geometry, and keep the quiet zone that the file's viewBox already includes. Verify the edited export still decodes before printing.