Enterprise-grade QR code generation with advanced customization options. Generate scalable SVG QR codes with logos, custom colors, and various styling patterns.
This API generates QR codes in SVG format, which is vector-based and infinitely scalable. SVG files can be used directly in web pages, converted to PNG/JPG using external tools, or embedded as data URLs. All responses are CORS-enabled for web applications.
Generate a QR code with JSON configuration (recommended for advanced options)
| Parameter | Type | Description |
|---|---|---|
| dataRequired | string | Content to encode (URL, text, or special formats like WIFI:) |
| size | number | Image size in pixels (default: 300, range: 50-2000) |
| color | string | QR code color as hex code or name (default: #000000) |
| background | string | Background color as hex code or name (default: #ffffff) |
| errorCorrection | string | Error correction level: L (~7%), M (~15%), Q (~25%), H (~30%) |
| margin | number | Quiet zone size (default: 4, range: 0-50) |
| format | string | Response format: "svg" or "json" (default: svg) |
| logoUrl | string | URL of logo image to overlay in center |
| logoSize | number | Logo size as percentage of QR (default: 20, range: 10-30) |
| borderRadius | number | Round corners of entire QR code (default: 0, range: 0-50) |
| cornerRadius | number | Round corners of corner detection patterns (default: 0, range: 0-10) |
| cornerColor | string | Different color for the three corner blocks |
| dotStyle | string | Dot pattern: square, rounded, dots, extra-rounded |
| cornerStyle | string | Corner pattern style: square, rounded, dots, extra-rounded |
fetch('https://qr.flowmattic.com/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'User-Agent': 'FlowMattic'
},
body: JSON.stringify({
data: 'https://flowmattic.com',
size: 400,
color: '#0066cc',
errorCorrection: 'H',
logoUrl: 'https://example.com/logo.png',
logoSize: 20,
cornerRadius: 5,
dotStyle: 'rounded',
format: 'json'
})
});
Generate a QR code with URL parameters (simple usage)
Accepts the same parameters as POST endpoint, passed as URL query string.
https://qr.flowmattic.com/generate?data=https://flowmattic.com&size=300&color=%230066cc
{
"data": "https://flowmattic.com",
"size": 300,
"format": "json"
}
{
"data": "WIFI:T:WPA;S:MyNetwork;P:password123;H:false;;",
"size": 300,
"errorCorrection": "H",
"format": "json"
}
{
"data": "https://flowmattic.com",
"size": 400,
"color": "#0066cc",
"errorCorrection": "H",
"logoUrl": "https://example.com/logo.png",
"logoSize": 20,
"borderRadius": 15,
"cornerRadius": 5,
"dotStyle": "rounded",
"format": "json"
}
{
"data": "https://instagram.com/yourhandle",
"size": 400,
"color": "#833AB4",
"errorCorrection": "H",
"cornerRadius": 7,
"cornerColor": "#E1306C",
"dotStyle": "extra-rounded",
"format": "json"
}
{
"data": "BEGIN:VCARD\nVERSION:3.0\nFN:John Doe\nTEL:+1234567890\nEMAIL:john@example.com\nEND:VCARD",
"size": 300,
"errorCorrection": "M",
"format": "json"
}
{
"data": "mailto:info@example.com?subject=Hello&body=Message",
"size": 300,
"color": "#DC2626",
"format": "json"
}
Returns the QR code as an SVG image with appropriate headers for direct download or display:
Content-Type: image/svg+xmlContent-Disposition: attachment; filename="qrcode.svg"Returns a JSON object containing the SVG data and configuration:
{
"success": true,
"data": "data:image/svg+xml;base64,...",
"svg": "<svg...>",
"config": {
"data": "https://example.com",
"size": 300,
"color": "#000000",
"background": "#ffffff",
"errorCorrection": "M"
}
}
Choose the appropriate error correction level based on your use case:
| Level | Recovery | Best For |
|---|---|---|
| L (Low) | ~7% | Clean environments, minimal damage expected |
| M (Medium) | ~15% | General purpose use (default) |
| Q (Quartile) | ~25% | Moderate damage or wear expected |
| H (High) | ~30% | Logo overlays or high-damage environments |