papnkukn / qrcode-svg

A simple QR Code generator in pure JavaScript / node.js library
MIT License
451 stars 93 forks source link

Feature request: add viewBox property #5

Closed martijnthe closed 5 years ago

martijnthe commented 6 years ago

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.

paulgeisler commented 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.

papnkukn commented 5 years ago

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()