Skip to content
QRCodeSDK
ALPHA

SVG string renderer

When to use

Section titled “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.

Minimal example

Section titled “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

Section titled “Return value”

The renderer returns a complete SVG string with an explicit width, height, and viewBox. The root element has role="img". Output with only square shapes uses shape-rendering="crispEdges"; curved styles omit that hint.

Renderer-specific options

Section titled “Renderer-specific options”

QRCodeSVGRendererOptions accepts the shared visual options plus these SVG-specific fields:

Option Type Default Effect
alt string undefined Fallback accessible name when ariaLabel is omitted
ariaLabel string undefined Sets aria-label and takes precedence over alt
title string undefined Adds a child <title> element
image.source QRCodeDataImageURL required with image Embeds a prepared data:image/... URL
image.size number 0.4 Image box as a fraction of matrix width
image.padding number 1 Clear padding measured in modules
image.clearBackground boolean true Clears modules behind the image and padding

Renderer-specific constraints

Section titled “Renderer-specific constraints”
  • image.source must be a non-empty embedded image data URL. The renderer does not read paths or fetch remote URLs.
  • Image size must be finite, greater than 0, and at most 1; padding must be finite and non-negative.
  • The renderer is runtime-neutral under the Core compatibility contract.
Section titled “Related guides”
Section titled “Related pages”