Placement
This section is dedicated to section 8.7 in the specification.
We need to understand multiple key points in this part (7.3).
A default QRCode is composed of many region. All default regions are explained below:
Dark Module
Finder Pattern
Timing Pattern
Alignment Pattern (V ≥ 2)
Format Information
Version Information (V ≥ 7)
Combined QRCode regions (V=7)
See the default QRCode for version 5, we will use it to continue our journey.
But, how do we place our structured buffer ? Let me show you an example:
This is the default QRCode for V=5
This is the occupied regions for V=5
This is the "path" we will follow when placing our data
The algorithm is not overly complex, so let's dive into it 🚀
We should start by:
- Making a grid of width and height V * 4 + 17 (with V the version 1-40)
- Making a function that returns if the module is "occupied" or not (see image above)
Now let's place our data ! (Dont forget the "Z" shape)
- Start from bottom right corner.
- Check if current module is occupied (using previous function), if not, place data.
- Do the same for left module.
- Then go up and repeat.
- When reaching top or bottom, inverted the direction and repeat on the next two columns. You should always skip the column n°6 (see image above).
Grabbing the data buffer from previous computations:
[ 64,  17, 236, 236,   0, 236,  17,  17, 236,  17, 236, 236,  17, 236,  17,  17, 236,  17, 236, 236,  17, 236,  17,  17, 236,  17, 236, 236,  17, 236,  17,  17, 236,  17, 236, 236,  17, 236,  17,  17, 236,  17, 236, 236,  17,  17, 204, 222, 104, 104, 158, 179, 219, 219, 218,  20, 225, 225, 240,  42,  31,  31, 157, 196, 120, 120, 103, 224,  91,  91, 216, 167, 193, 193,  32, 154, 234, 234, 194, 173, 157, 157,  90, 179,  63,  63,  54, 219, 191, 191,  72, 236,   5,   5,  65,  53, 131, 131, 182, 149, 166, 166,  36, 123, 141, 141, 123,  60,   8,   8,  73, 206,  62,  62, 111, 155,  48,  48, 109, 101, 214, 214,  66,  83,  44,  44,  17,  29,  46,  46, 128,  22,  39,  39]
We are placing each bit (not byte) on the SVG, like so: (use the icon)
Recap:
We had a complete buffer with a known size, that we can lookup here with Version = 5, ELC = H and Mode = Byte. We find 44 bytes (352 bits).

We make a 2D grid for the SVG. Compute occupied pixel area.
Then we place our data on the grid following a "Z shape".
Made with 🚀 by erwanvivien
Catched a mistake ? Please make an issue