QR code as SVG

[Offbeatmammal]

We are generating QR codes on our website for access to certain things, and usually it's enough to download the generated image and print that off, but I've had a request to make it available as an SVG. I could go off and find another QR code generator solution but I'd prefer not to - is it something WA could handle natively from the canvas?

[claviska]

Great question. It would require a substantial rearchitecture to generate the existing canvas output and SVG, especially considering the need to stay in sync with the component's current styling API.

The change would be better to do upstream, but I'm not sure it's worth the extra bytes to support both. SVG would be best, but unless @KonnorRogers wants to rework his fork, I think we're stuck with canvas. 😆

Note: if resolution is the problem, you can generate a larger canvas size and style the width/height via CSS to scale it down.

[KonnorRogers]

This is actually do-able without really patching anything.

its a small fix in qr-creator to allow passing a context and modify conditionals, patch arcTo in canvas-to-svg and....VOILA!

[KonnorRogers]

Well...instead of doing work on the app around silly things like "data privacy", or "enhanced team management"...or whatever, I got nerd sniped thanks to @claviska . Here is the conclusion of today:

KonnorRogers/qr-creator#3

^ PR to allow passing a custom context (released in v1.1.0 of @konnorr/qr-creator`)

You can find a demo here:

https://konnorrogers.github.io/qr-creator/

I also forked a canvasToSvg library since arcTo was broken.

https://github.com/KonnorRogers/svgcanvas

and released under 2.6.3 with the latest fixes. That finally leads us here:

A PR into Web Awesome to make it easy to pass in your own context and use a library like @konnorr/svgcanvas

PR: #2672

And basically what you would do to generate an SVG is grab our settings and call generate(newSettings)

So you would do:

import { Context } from "@konnorr/svgcanvas"
await customElements.whenDefined("wa-qr-code")
const qrCode = document.querySelector("wa-qr-code")
await qrCode.hasUpdated
function generateSVG () {
  const settings = qrCode.getSettings()
  const context = new Context(settings.size, settings.size)
  settings.context = context
  qrCode.generate(settings) // simulate draw calls in our context above
  const svgString = context.getSerializedSvg(true) // Returns an SVG as a string
  const svgNode = context.getSvg(true) // Returns a live DOM node
}

Alternatively @claviska , the library for patching the 2d context is ~8.5kb

https://bundlejs.com/?q=%40konnorr%2Fsvgcanvas

We could bundle it as an enhancement, but not sure how we feel about the size.

[Offbeatmammal]

@KonnorRogers as always, love ya work (and sorry to be the cause of another distraction). If size is a concern, maybe make it an optional/on-demand load only if a page uses it (WA already seems to be very smart with how/what it loads)

[claviska]

I got nerd sniped thanks to @claviska

🎯

Alternatively @claviska , the library for patching the 2d context is ~8.5kb

That's a lot of kb for an edge case...would it save bytes if the underlying library only rendered SVG? 🤔

[KonnorRogers]

That's a lot of kb for an edge case...would it save bytes if the underlying library only rendered SVG? 🤔

Negative. The only thing that would save bytes is if we forked the SvgCanvas library and only supplied the functions that the QRCode generator calls.

What happens above is the library "shadows" calls to the 2D rendering context and makes its internal representation and then writes it to an SVG