Closed martijnthe closed 5 years ago
That's my simple workaround:
const svg_qr_code = new QrCode({
content: "http://github.com/",
padding: 0,
width: 200,
height: 200
}).svg().replace('height="200"', 'height="200" viewBox="0, 0, 200, 200"')
The SVG size is then controllable with the size of the container where it's in.
True, the viewBox
attribute is very useful in a resizable environment, e.g. responsive web page.
However, width
and height
attributes are preferred on a static page, e.g. a fixed size image or a printable document.
Added in version 1.1.0
const svg_qr_code = new QrCode({
content: "http://github.com/",
padding: 0,
width: 200,
height: 200,
container: "svg-viewbox"
}).svg()
It would be nice to add the viewBox property in the SVG string. This make it much easier to scale a single generated SVG using CSS styles.
In my own project, I've solved this in a hacky way by adding
viewBox="0 0 250 250"
myself after generating the SVG string.