SVG - QR Code Generator

[Acorn]

You can use this design as a straight generator and copy out the SVG code for inclusion elsewhere, or, you can include directly into your website design.

TG.zip

As it has an external asset, I have zipped the design with the JS file already linked but with details on how to add to your own design.

The purpose is to replace the underwhelming Xara Third-Party Widget that is still only an image.

Acorn

[Boy]

Acorn is brill!

[Spamiky]

Acorn is brill! :-)

[RKissane]

Acorn,

I am trying to understand for a QR code what the advantage a SVG would be over an image. Is it just for page loading speed or am I missing something else?

Thanks
Ray

[Acorn]

Acorn,
I am trying to understand for a QR code what the advantage a SVG would be over an image. Is it just for page loading speed or am I missing something else?
Thanks Ray

Ray, first of clarity at scale - no fuzzy edges. Second, download speed improved as there is no extra HTTP call to fetch an image, it is there in the web page already. Third, manipulation; you could alter the blobs, change colour & opacity, even animate. Fourth, avoids the Xara QR Widget, where Xara handles the coding on its servers (with all the implications that has). Fifth, avoids the Xara QR Widget that is broken as you try to make it larger. Sixth, you have control to tweak any part of the QR parameters. Sixth, independence, you are not reliant of any web service or Internet access.

Acorn

[Egg Bramhill]

Hi Acorn,
I thought I'd replied to this post but it aint there!
Excellent tip and in my goodies folder.

[wizard509]

Thank you Acorn

[Egg Bramhill]

AS stated earlier it a great on the fly vector creation svg file. However, the published .xar file contains no direct .svg file.
I've found that if I click on the vector generated qr code I can copy the svg info.
Pasting that into a text file & saving that as an .svg file works well.

Mainly what I'm trying to point out is that at present it creates excellent vector QR codes. However if you want to use the output as a useful vector shape in a printed poster for example it's not straight forward.

My method is to right-click over the QR code in a browser and select Inspect Element (Q)

I then copy the svg code within the inspector and paste it into Notepad++ and save it as an svg file.

Is there a simpler way Acorn?

Attached an svg file extracted from the Inspect Element (Q) code.

Probably missing something obvious here but trying my best