I wrote it specifically because most online barcode generators don’t support vector output or suck in some other way: ads, signup necessary, code payload exposed to server-side processing etc.
Barcodes have been generated for decades on low-resource embedded devices. Even what would have been a modest-to-low-end machine 25 years ago would have no problem handling the compute needed for this job.
On this end, it just looks like the user has to deal with the penalty of dealing with 1 MB of resources when hitting the main page.
The version string isn't needed these days, nor the XML header or the doctype.
The code/url/page title can go in the SVG title, to make it show on mouseover.
The id=barcode is also superfluous. Since id codes should be unique, this could be a problem when many QR codes exist on a page.
The background rectangle does not need x=0, y=0 since that is implied.
The 'hard coding' of the black and white is what you want to avoid any dark mode issues, however, I would still use currentColor and transparent rather than black, just to put myself in a world of dark/light mode pain, fixed in CSS.
Like another poster said, laser printers "back in the day" were freestanding computers with various communications interfaces that happened to have fancy paper handling and printing peripherals attached. In the case of the Apple LaserWriter, for example, it was arguably a more powerful computer[0] than the Mac machines of the day that were sending print jobs to it.
There were different ROM "personalities" available for laser printers, some of which came on pluggable cartridges.
Check these links out:
- https://www.pagetable.com/?p=1673
- https://www.pagetable.com/?p=1721
- https://www.pagetable.com/?p=1850
Michael Steil, the blogger responsible for those links, has done work extracting code and PostScript data out of some of those old cartridges. It's a really cool aspect of retrocomputing many people aren't even aware of.
[0] https://web.archive.org/web/20240404213221/https://lowendmac...
Recently I put some 8-bit graphics in SVG using lines and stroke dash arrays. I also got them animated, in a space efficient way, by keeping the lines that do not change from frame to frame. (I now have Maria and Willy from 'Jet Set Willy' for the wait after a form is submitted, plus a few Space Invaders. I am resisting the urge to do Pac-Man ghosts, but I will invent a need for them...)
Since an SVG can be a mystery box full of CSS, SMIL, Javascript and 'foreign object' imports, I am tempted to give it a go, so that a CSS variable is passed to the depths of the shadow DOM in a URL fragment or query string, to magically return either a barcode or a QR code.
This will take a little while, but I am keen to give it a go. In some ways, SVG is like 'Duplo LEGO' with the Libre Barcode as a font more like 'LEGO Technik', requiring vastly more skill.
Just because you can doesn't mean that you should, plus there are many barcode libraries that I know well, so why reinvent the wheel?
The typical barcode library usually comes with fluff, formats and libraries that I don't need. Hence 'qr.svg#upc-number' with it just being one file has appeal.
I am not yet up to speed on the latest AI toys, however, given the problem space is well defined, could I just ask AI chat bot to churn out the code for this in a matter of seconds, for it to encapsulate the logic in an SVG? Would it know how to specify 'crisp edges' and what the deal is with aspect ratio?
Similarly, could I also ask the AI nicely to create my own barcode font?
These seem manageable problems for todays trillion-dollar wonder tech, it is not as if I am asking for a cure for cancer or anything hard, yet I lack confidence in an AI solution, and feel I might as well work it out myself, given my goal is learning SVG rather than prompting.
My lack of confidence is the AI solution is due to the scarcity of people writing online about doing cool things with CSS variables, URL fragments and code in SVG. A Google search does not show 'stroke dash array' things for QR codes and online QR code generators create lots of fully fledged rect-angles, that lack the space efficiency or human-readability of my prefered approach, even if gzip doesn't care.
Sorry for bringing AI into everything, I just have my doubts that the new toys are that capable when it comes to novel solutions.
- https://fuglede.github.io/llama.ttf/
- https://github.com/bjia56/translate.ttf
- https://github.com/hsfzxjy/handwriter.ttf
It uses this, which i have no idea what it is :-) https://learn.microsoft.com/en-us/typography/opentype/spec/f...
Another cool font, but less original, I stumbled upon recently is Marelle https://marelle.forge.apps.education.fr/ for cursive.
This website is in French so I was unable tounderstand the text
and the website is very resistant to automatic translation by Google Translate
>https://marelle-forge-apps-education-fr.translate.goog/?_x_t...
What gives?
" Marelle is a free cursive police force for teaching writing in elementary school. Introduction
This project is supported by the Digital Directorate for Education of the Ministry of National Education, and developed in the Forge of Digital Educational Commons.
The Marelle police is designed specifically for teaching cursive writing in elementary school, it was developed by a team of teachers and designers specialized in writing systems.
Teaching Cursive Writing
Structure and sequence of letters, rhythm and proportion, contextual variants: the Marelle font was thought around specific criteria to offer a quality model to teachers and students. Particular attention has been paid to the trace of numbers, capital letters and punctuation. A complete professional tool
The Marelle police offers 3 types of variants:
uppercase sticks or cursive
with or without lineage Seyes
height of ascendants and descendants
(the first line made me laugh)
I now understand why there is no English version (though still surprised Google could not translate it)
I'm not sure they owe it to anyone to make the website available in English :-)
Thanks
It looks like Code 128 could potentially handle some ISO-8859-1 accented latin characters, but I'm not sure how to test it.
To use these fonts you have to use an encoder like the one below. It is an optimizing encoder, that means, it produces the shortest barcode that can encode the input. For this the encoder, if necessary or shorter, switches between the three available Code Sets (list from Wikipedia):
Now, do it with QR codes...