Generating SVG Barcodes

While barcodes have been around for decades, and we all know how fundamental they are to everyday life, it doesn't mean your last implementation is still the best way to integrate them. Technology is always changing and it's moving forward while new technologies replace older ones. A barcode which used to be in JPEG format can now be in the scalable SVG format.

In this video, I walk through the use of a JavaScript library which allows for the easy creation of SVG barcodes. This works without a specific font and allows for a scalable file which can be integrated into a PDF or any other type of output. Need barcode support on FileMaker Go on iOS? Need to generate barcodes client side on either Mac or Windows?

If you're building a solution which needs to use barcodes, and you're looking for the least expensive option, then you can't get much better than a commercially free JavaScript library. All it takes is a little bit of know-how and you're creating barcodes in very little time!

AttachmentSize
SVGBarcodes.zip1.61 MB

Comments

Wow... yet another 43 minute video that leaves me completely at sea at the end of it.

I have been doing a few JavaScript/Web Viewer articles lately because there are so many good free JavaScript Libraries.

I do my best to explain every detail. What is the part which is not working for you? The topic being covered or the content delivery?

-- Matt Petrowsky - ISO FileMaker Magazine Editor

Download link leads to page reading "Sorry We’re having a little trouble."

-Michael Shaw

Great video! Do you have any follow up instructions for doing the same thing with QRcodes? I looked through the other videos and links to the QRcode login lessons but I'm really just interested in doing this exact same integration with QRcodes.

Thanks!

Perfect video and file! I extended your file with all the barcode types as option - works great. What would be really great - to give some hints, how to make a pdf file instead of a svg and how to make the background transparent. And - well I don´t know, but I have problems with the fonts.: Default "monospace" will be replaced in affinity photo / designer - I did not try it by now with Illustrator...

Perfect video and file! I extended your file with all the barcode types as option - works great. What would be really great - to give some hints, how to make a pdf file instead of a svg and how to make the background transparent. And - well I don´t know, but I have problems with the fonts.: Default "monospace" will be replaced in affinity photo / designer - I did not try it by now with Illustrator...

This is a great solution and have been using it in my application. I have just upgraded to FileMaker 17 and it doesn't seem to work anymore. The barcode is generated by the web viewer however the container does not get populated. Has something changed with the script steps in version 17?

I did this thanks. I also had to change the default app that fmp url's are opened with as it was defaulted to an older version of FileMaker, it was opening a previous version of FileMaker every time the script was called.

Hi thank you for the file and tutorial. I cant preview my clipboard svg data, It shows up in browse but not in Preview. Hide Object When is Empty and If I copy the html I created to the Demo it works fine. Am I missing a system setting or something.

Every time the web viewer refreshes, it opens FM 16 (the solution is running in 17) and gives an error message about the file not being able to be opened because the file is not available or open on the host. That, unfortunately, makes this technique a nonstarter until I can resolve that error.

HI, I am using FM17, and planning to add barcode solution into my project. I am unable to get the captured data into clipboard so it can generate a SVG file. all it displays is "On Clipboard" in the clipboard field. I also tried your demo file by deleting all the records and creating a new record even their it says "On Clipboard" in the clipboard field. I am on windows. I am i missing something. Appriciate your help

Matt, thanks for the teaching. This technique is working great on Mac OS, but recently needed to have it work on a WIN10 machine. Problem I'm having is the "Capture" script does not always fire. Specifically if the barcode is greater than 4 characters. Have you come across this? something I'm missing on windows? would love to be able to run this or a variation of , on server.

thanks