4 ms·

Client-side QR code generator with SVG output

176 points by kentbrew 2y ago

kentbrew 2y ago
"The demo on this page combines Project Nayuki’s QR Code generator library (a multi-language open source project that can, among other things, perform the conversion of text into raw QR code data) with my own QRSVG project, which can turn a QR-like two-dimensional boolean data map into an efficient vector description of its own visualization by tracing the contours of contiguous shapes."
toddmorey 2y ago
One of my favorite components from the open source web components library Shoelace is the QR code generator: https://shoelace.style/components/qr-code https://shoelace.style/components/qr-code
nayuki 2y ago
Thank you for building this wonderful UI on top of my library!
boomskats 2y ago
This looks great! Wish I had it a few months ago instead of having to use qr-code-styling[0] which was a bit of a pain. I remember it was around the same time that Obsidian got native callouts, so my notes for that project are all colourful & contain valuable admonitions like this: ``` > [!todo] > That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. ``` [0]: https://github.com/kozakdenys/qr-code-styling https://github.com/kozakdenys/qr-code-styling
- taskforcegemini 2y ago
  > That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. or a phrase, like "beating off a dead horse"
  - beachy 2y ago
    Yikes. That does not mean what you think it does in my locale. The phrase would be "flogging a dead horse".
- sandermvanvliet 2y ago
  > That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. How about: fröbelen https://nl.m.wiktionary.org/wiki/fr%C3%B6belen https://nl.m.wiktionary.org/wiki/fr%C3%B6belen Roughly means: To be creatively busy for fun
- tgv 2y ago
  There’s an English word for it: art. If that’s too broad, try https://en.m.wikipedia.org/wiki/Autotelic https://en.m.wikipedia.org/wiki/Autotelic
KTibow 2y ago
If you stumbled upon this looking for the smallest QR code JS library, it's probably LeanQR [0]. It's under 10kb minified and 5kb compressed. [0] https://qr.davidje13.com/ https://qr.davidje13.com/
- lifthrasiir 2y ago
  While I didn't never specifically optimize it for the size (unlike some libraries I do), my very old qr.js library [1] seems to be smaller than that, less than 9 KB minified and 4 KB gzipped in my brief testing. I should note that qr.js never supported the correct Kanji encoding and optimal encoding based on dynamic programming, but otherwise it is functionally complete and I think it can't get much larger than that. There are lots of rooms to cut from there and I will say 5 KB is a fair estimate for the minified size after modest but correctly guided size optimization. [1] https://github.com/lifthrasiir/qr.js https://github.com/lifthrasiir/qr.js (predates the modern JS, but surely more popular than LeanQR I believe)
  - KTibow 2y ago
    Huh. Didn't run in to it when I was searching for libraries. It appears to be just 350 bytes larger than LeanQR when gzipped.
declan_roberts 2y ago
USE THIS SOFTWARE AND LEARN FROM MY MISTAKE: We made a cute Christmas video to include in our card this year. My wife created a QR code from a random website and included it in the card as a picture. It linked to our video. We sent all of the cards out. People loved it. ... except we got an email from the QR code company about a week before Christmas. We went over our "free" click (the QR code went through their URL shortener). If we wanted to keep the QR code active we had to pay $20/mo. We got absolutely fleeced. Never again. Control the URL and make the QR image yourself.
- 0cf8612b2e1e 2y ago
  Clever grift. I am surprised I have not heard more stories about “free” web tools utilizing some kind of similar monetization trick.
- franga2000 2y ago
  I've spotted this on several large events on setup day, explained how fucked they'll be in a few days and showed them a safe QR code generator. Usually it was just signage and they could reprint the QR code and glue it over the bad one, but one of them had printed hundreds of leaflets with the event schedule and I think they just ended up paying because even a year of "QR ransom" was cheaper than overnight printing and shipping. My other favourite QR-code related fuckup is designers trimming the quet zone to just 1 module "because the white border looks ugly" and not checking if the codes are scannable. That and light-on-dark codes, which according to the standard don't exist, but most scanner apps can handle them these days thanks to endless complaining by designers.
- joshstrange 2y ago
  Yep, came here to make a similar comment. My sister used some random free QR generator to open your email app with a “to/subject” filled out. There was no sign up and she didn’t know to check to QR code itself. Instead of being a normal QR code (QR codes support the email case directly, as part of the “spec”) it was a link to the QR company’s website that immediately bounced you to the the right url to open your email. After a month or so they emailed her (using the email address she entered for the code) and told her to pay up or the code would stop working. These people are scum. Make it clear it’s not a standalone QR Code (and there are potential upsides to this, to be fair, like updating where the qr code points) and don’t bait and switch.
the_arun 2y ago
For some reason in my phone camera - "Open in browser" is not showing up if background is dark.
- fy20 2y ago
  What phone and software? Old libraries looked for the contrast of black-on-white (not white-on-black), but I thought that was a solved problem now.
  - the_arun 2y ago
    iPhone 15 pro, iOS 17.6.1
    - nemetroid 2y ago
      Black background, white foreground works fine on my iPhone 13 mini.
- jeroenhd 2y ago
  The original spec didn't allow for anything but "dark on light" codes. The official spec has been amended a bunch of times, but it's not always clear what version of the QR code spec an app uses. If it stuck with the original from 2000, it can't scan inverted codes. The spec itself has been amended in 2006, but the full spec is proprietary and needs to be bought, so not everyone may have updated their code if they have the old spec on a network share somewhere.
eaq 2y ago
For local use, this Python library can generate SVGs with QR codes: https://github.com/lincolnloop/python-qrcode https://github.com/lincolnloop/python-qrcode
davchana 2y ago
Pretty great example, but I was bummed to see that Error Level is missing. I like to create easy codes with low error correction.
- nayuki 2y ago
  Use mine - more technical options, fewer graphical options. https://www.nayuki.io/page/qr-code-generator-library https://www.nayuki.io/page/qr-code-generator-library
butz 2y ago
Isn't this one of those rare occasions where bitmap file format is more optimal for storing output?
- asplake 2y ago
  With SVG you can render directly on the page, no extra file involved.
  - rossant 2y ago
    You can also do that with png https://stackoverflow.com/a/8499716/1595060 https://stackoverflow.com/a/8499716/1595060
- franga2000 2y ago
  At 1 module = 1 pixel resolution, it definitely is, although a gzipped SVG gets you closer than you'd expect. The main problem with images is scaling: unless you can force the image to scale "without" interpolation, you'll get a blurry unscannable mess. If you increase the resolution enough to be crisp on a modern high-res display, at some point, SVG becomes more efficient. I did some experiments on this a few years back, but can't find the results right now. A even if you can force nearest-neighbour interpolation (in CSS this is only possible since 2015 in Chromium and even later in Firefox), the result still won't be perfect at non-integer scales (see [0]). Other use-cases (like PDF files IIRC) don't give you the option to force scaling modes at all, so drawing them with vector paths is the only option to make them crisp. [0] https://codepen.io/robinrendle/full/EaOJeq/ https://codepen.io/robinrendle/full/EaOJeq/
Techbrunch 2y ago
I found that Anthony Fu's QR Toolkit is a great alternative: https://qrcode.antfu.me/ https://qrcode.antfu.me/
jillesvangurp 2y ago
I've been using this library: https://www.npmjs.com/package/qrcode https://www.npmjs.com/package/qrcode. Works great and it does svg too. There are a few alternatives to this around as well but this one seems good enough.
Narhzih 2y ago
You can try https://app.y.gy https://app.y.gy. It's not a library, but they have an API for link-shortening and QR Code Generation.
pikminguy 2y ago
If you're looking for a non web QR generator with lots of options try Zint. https://www.zint.org.uk/ https://www.zint.org.uk/ It's the only option I have found that doesn't seem to lock out any features. You want to control the error correction? Got it. Render in color? No problem. Batch convert 1000 lines of text into 1000 individual images. It took less than a second. It even does Datamatrix and other non QR encodings.

176 points by kentbrew 2y ago

"The demo on this page combines Project Nayuki’s QR Code generator library (a multi-language open source project that can, among other things, perform the conversion of text into raw QR code data) with my own QRSVG project, which can turn a QR-like two-dimensional boolean data map into an efficient vector description of its own visualization by tracing the contours of contiguous shapes."

toddmorey 2y ago

One of my favorite components from the open source web components library Shoelace is the QR code generator: https://shoelace.style/components/qr-code https://shoelace.style/components/qr-code

nayuki 2y ago

Thank you for building this wonderful UI on top of my library!

boomskats 2y ago

This looks great! Wish I had it a few months ago instead of having to use qr-code-styling[0] which was a bit of a pain. I remember it was around the same time that Obsidian got native callouts, so my notes for that project are all colourful & contain valuable admonitions like this: ``` > [!todo] > That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. ``` [0]: https://github.com/kozakdenys/qr-code-styling https://github.com/kozakdenys/qr-code-styling

taskforcegemini 2y ago
> That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. or a phrase, like "beating off a dead horse"
- beachy 2y ago
  Yikes. That does not mean what you think it does in my locale. The phrase would be "flogging a dead horse".
sandermvanvliet 2y ago
> That feeling when you're wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German. How about: fröbelen https://nl.m.wiktionary.org/wiki/fr%C3%B6belen https://nl.m.wiktionary.org/wiki/fr%C3%B6belen Roughly means: To be creatively busy for fun
tgv 2y ago
There’s an English word for it: art. If that’s too broad, try https://en.m.wikipedia.org/wiki/Autotelic https://en.m.wikipedia.org/wiki/Autotelic

KTibow 2y ago

If you stumbled upon this looking for the smallest QR code JS library, it's probably LeanQR [0]. It's under 10kb minified and 5kb compressed. [0] https://qr.davidje13.com/ https://qr.davidje13.com/

lifthrasiir 2y ago
While I didn't never specifically optimize it for the size (unlike some libraries I do), my very old qr.js library [1] seems to be smaller than that, less than 9 KB minified and 4 KB gzipped in my brief testing. I should note that qr.js never supported the correct Kanji encoding and optimal encoding based on dynamic programming, but otherwise it is functionally complete and I think it can't get much larger than that. There are lots of rooms to cut from there and I will say 5 KB is a fair estimate for the minified size after modest but correctly guided size optimization. [1] https://github.com/lifthrasiir/qr.js https://github.com/lifthrasiir/qr.js (predates the modern JS, but surely more popular than LeanQR I believe)
- KTibow 2y ago
  Huh. Didn't run in to it when I was searching for libraries. It appears to be just 350 bytes larger than LeanQR when gzipped.

declan_roberts 2y ago

USE THIS SOFTWARE AND LEARN FROM MY MISTAKE: We made a cute Christmas video to include in our card this year. My wife created a QR code from a random website and included it in the card as a picture. It linked to our video. We sent all of the cards out. People loved it. ... except we got an email from the QR code company about a week before Christmas. We went over our "free" click (the QR code went through their URL shortener). If we wanted to keep the QR code active we had to pay $20/mo. We got absolutely fleeced. Never again. Control the URL and make the QR image yourself.

0cf8612b2e1e 2y ago
Clever grift. I am surprised I have not heard more stories about “free” web tools utilizing some kind of similar monetization trick.
franga2000 2y ago
I've spotted this on several large events on setup day, explained how fucked they'll be in a few days and showed them a safe QR code generator. Usually it was just signage and they could reprint the QR code and glue it over the bad one, but one of them had printed hundreds of leaflets with the event schedule and I think they just ended up paying because even a year of "QR ransom" was cheaper than overnight printing and shipping. My other favourite QR-code related fuckup is designers trimming the quet zone to just 1 module "because the white border looks ugly" and not checking if the codes are scannable. That and light-on-dark codes, which according to the standard don't exist, but most scanner apps can handle them these days thanks to endless complaining by designers.
joshstrange 2y ago
Yep, came here to make a similar comment. My sister used some random free QR generator to open your email app with a “to/subject” filled out. There was no sign up and she didn’t know to check to QR code itself. Instead of being a normal QR code (QR codes support the email case directly, as part of the “spec”) it was a link to the QR company’s website that immediately bounced you to the the right url to open your email. After a month or so they emailed her (using the email address she entered for the code) and told her to pay up or the code would stop working. These people are scum. Make it clear it’s not a standalone QR Code (and there are potential upsides to this, to be fair, like updating where the qr code points) and don’t bait and switch.

the_arun 2y ago

For some reason in my phone camera - "Open in browser" is not showing up if background is dark.

fy20 2y ago
What phone and software? Old libraries looked for the contrast of black-on-white (not white-on-black), but I thought that was a solved problem now.
- the_arun 2y ago
  iPhone 15 pro, iOS 17.6.1
  - nemetroid 2y ago
    Black background, white foreground works fine on my iPhone 13 mini.
jeroenhd 2y ago
The original spec didn't allow for anything but "dark on light" codes. The official spec has been amended a bunch of times, but it's not always clear what version of the QR code spec an app uses. If it stuck with the original from 2000, it can't scan inverted codes. The spec itself has been amended in 2006, but the full spec is proprietary and needs to be bought, so not everyone may have updated their code if they have the old spec on a network share somewhere.

eaq 2y ago

For local use, this Python library can generate SVGs with QR codes: https://github.com/lincolnloop/python-qrcode https://github.com/lincolnloop/python-qrcode

davchana 2y ago

Pretty great example, but I was bummed to see that Error Level is missing. I like to create easy codes with low error correction.

nayuki 2y ago
Use mine - more technical options, fewer graphical options. https://www.nayuki.io/page/qr-code-generator-library https://www.nayuki.io/page/qr-code-generator-library

butz 2y ago

Isn't this one of those rare occasions where bitmap file format is more optimal for storing output?

asplake 2y ago
With SVG you can render directly on the page, no extra file involved.
- rossant 2y ago
  You can also do that with png https://stackoverflow.com/a/8499716/1595060 https://stackoverflow.com/a/8499716/1595060
franga2000 2y ago
At 1 module = 1 pixel resolution, it definitely is, although a gzipped SVG gets you closer than you'd expect. The main problem with images is scaling: unless you can force the image to scale "without" interpolation, you'll get a blurry unscannable mess. If you increase the resolution enough to be crisp on a modern high-res display, at some point, SVG becomes more efficient. I did some experiments on this a few years back, but can't find the results right now. A even if you can force nearest-neighbour interpolation (in CSS this is only possible since 2015 in Chromium and even later in Firefox), the result still won't be perfect at non-integer scales (see [0]). Other use-cases (like PDF files IIRC) don't give you the option to force scaling modes at all, so drawing them with vector paths is the only option to make them crisp. [0] https://codepen.io/robinrendle/full/EaOJeq/ https://codepen.io/robinrendle/full/EaOJeq/

Techbrunch 2y ago

I found that Anthony Fu's QR Toolkit is a great alternative: https://qrcode.antfu.me/ https://qrcode.antfu.me/

jillesvangurp 2y ago

I've been using this library: https://www.npmjs.com/package/qrcode https://www.npmjs.com/package/qrcode. Works great and it does svg too. There are a few alternatives to this around as well but this one seems good enough.

Narhzih 2y ago

You can try https://app.y.gy https://app.y.gy. It's not a library, but they have an API for link-shortening and QR Code Generation.

pikminguy 2y ago

If you're looking for a non web QR generator with lots of options try Zint. https://www.zint.org.uk/ https://www.zint.org.uk/ It's the only option I have found that doesn't seem to lock out any features. You want to control the error correction? Got it. Render in color? No problem. Batch convert 1000 lines of text into 1000 individual images. It took less than a second. It even does Datamatrix and other non QR encodings.