توليد QR Code بتصميم مخصص: دليل المطور

Embed This Widget

Theme


      
    

Widget powered by . Free, no account required.

Programmatic QR code customisation: module shape rendering, colour gradients, logo embedding, and SVG manipulation.

QR Code Generation with Custom Design: Developer Guide

Programmatic QR code customisation goes beyond basic generation — developers can control module shapes, colours, gradients, and logo placement entirely through code.

Module Shape Rendering

QR code libraries produce a boolean matrix (True/False for each module position). Custom rendering interprets this matrix with styled shapes:

  • Squares: Default rendering
  • Circles/dots: Replace each True module with a circle
  • Rounded squares: Apply corner radius to each module
  • Connected paths: Merge adjacent modules into continuous shapes

Colour Customisation

Apply brand colours programmatically:

  • Per-module colours based on position (radial gradient effect)
  • Different colours for finder patterns vs data modules
  • Background patterns or images behind the QR code
  • Transparency for overlay on photos or designs

SVG Manipulation

SVG output is the most flexible format for programmatic styling:

  1. Generate the QR code as SVG
  2. Parse the SVG DOM
  3. Apply CSS classes or inline styles to individual module elements
  4. Add logo, frames, and text elements
  5. Output the styled SVG

Programmatic Logo Embedding

import segno
from PIL import Image

# Generate QR code
qr = segno.make("https://example.com", error="h")
qr.save("base.png", scale=10, border=4)

# Open and overlay logo
base = Image.open("base.png")
logo = Image.open("logo.png")

# Calculate centre position
pos = ((base.size[0] - logo.size[0]) // 2,
       (base.size[1] - logo.size[1]) // 2)
base.paste(logo, pos)
base.save("branded_qr.png")

Design Validation

After applying custom styling, validate that the QR code still scans:

  1. Decode the styled QR code with pyzbar or ZXing
  2. Compare the decoded data with the original input
  3. Test at the minimum expected scan distance
  4. Test on multiple devices

Custom designs that fail validation need reduced styling intensity or increased error correction.

Key Takeaways

  • QR libraries produce boolean matrices; custom rendering styles the output
  • SVG is the most flexible format for programmatic style manipulation
  • Logo embedding requires EC Level H and centre positioning
  • Always validate styled QR codes scan correctly after customisation
  • Test on multiple devices — styled codes have lower scan margins