SVG string renderer

When to use

Use QRCodeSVGRenderer for scalable output in web pages, email, print, generated assets, or HTTP responses. It is the recommended default when the consumer accepts SVG text.

Recommended default

Choose SVG when the consumer accepts it: output stays sharp at every size and the renderer has no browser or Node.js dependency.

Minimal example

import {QRCodeSVGRenderer, qrcode} from '@qrcodesdk/core';

const svg = qrcode('https://qrcodesdk.dev').render(QRCodeSVGRenderer());

Learn here more about using the SVG string in the browser.

Return value

The renderer returns a complete SVG string with an explicit width, height, and viewBox. A non-empty accessible name adds role="img"; decorative output has no image role. Output with only square shapes uses shape-rendering="crispEdges"; curved styles omit that hint.

Renderer-specific options

QRCodeSVGRendererOptions accepts style, accessibility, and centerImage. It rejects every other key.

Option	Type	Default	Effect
style	QRCodeVisualStyle	shared defaults	Applies graphical dimensions, colors, and shapes
accessibility.ariaLabel	string	undefined	Sets aria-label and meaningful image semantics
accessibility.title	string	undefined	Adds a child <title> element
centerImage.source	QRCodeDataImageURL	required with centerImage	Embeds a prepared data:image/... URL
centerImage.size	number	0.4	Image box as a fraction of matrix width
centerImage.padding	number	1	Clear padding measured in modules
centerImage.clearBackground	boolean	true	Clears modules behind the image and padding

Renderer-specific constraints

Keep the application’s trust boundary

Renderer-generated text is escaped, but inserting any HTML string into a document still requires the normal trust decision for that application.

• centerImage.source must be a non-empty embedded image data URL. The renderer does not read paths or fetch remote URLs.
• SVG does not accept accessibility.alt; use ariaLabel and optionally title.
• Image size must be finite, greater than 0, and at most 1; padding must be finite and non-negative.
• Options are validated and copied when QRCodeSVGRenderer() is called.
• The renderer is runtime-neutral under the Core compatibility contract.

Related guides

• Customize appearance for shared colors, module shapes, quiet zones, labels, and scan reliability.
• Add a center image for preparing an SVG center image source.
• Browser Usage for rendering in the browser.
• Download or save for files and browser downloads.
• Serve a QR code for HTTP responses.