QR Code
SVG QR code generator with custom colors, sizes, and error correction.
<rhx-qr-code>
Examples
Basic
<rhx-qr-code rhx-value="https://example.com"
rhx-label="Example website" />Large with High Error Correction
<rhx-qr-code rhx-value="https://example.com"
rhx-label="Example website"
rhx-size="256"
rhx-error-correction="H" />Custom Colors
<rhx-qr-code rhx-value="https://example.com"
rhx-label="Branded QR code"
rhx-fill="#6366f1"
rhx-background="#f0f0ff" />Rounded Dots
<rhx-qr-code rhx-value="https://example.com"
rhx-label="Rounded QR code"
rhx-radius="0.5" />Small
<rhx-qr-code rhx-value="https://example.com"
rhx-label="Small QR code"
rhx-size="64" />Error Correction Levels
L (7%)
M (15%)
Q (25%)
H (30%)
<rhx-qr-code rhx-value="https://example.com" rhx-label="Low EC"
rhx-error-correction="L" rhx-size="96" />
<rhx-qr-code rhx-value="https://example.com" rhx-label="Medium EC"
rhx-error-correction="M" rhx-size="96" />
<rhx-qr-code rhx-value="https://example.com" rhx-label="Quartile EC"
rhx-error-correction="Q" rhx-size="96" />
<rhx-qr-code rhx-value="https://example.com" rhx-label="High EC"
rhx-error-correction="H" rhx-size="96" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-value |
string |
- |
The text/URL to encode |
rhx-label |
string |
- |
Accessible label for the QR code |
rhx-size |
int |
128 |
Width and height in pixels |
rhx-fill |
string |
#000000 |
Color of the QR code modules |
rhx-background |
string |
#ffffff |
Background color |
rhx-error-correction |
string |
M |
Error correction level: L, M, Q, H |
rhx-radius |
double |
0 |
Dot corner radius (0 = square, 0.5 = rounded) |
Accessibility
- Renders an SVG with
role="img"andaria-labelfrom therhx-labelproperty. - Includes a
<title>element inside the SVG for additional screen reader support. - QR codes are visual-only; always provide alternative text or a visible link alongside the QR code.