How to Create Bitmaps and SVG for HTML Output?

How to Create Bitmaps and SVG for HTML Output?

Below are sample calls for bitmap creation. The bitmaps are already optimized for 100 and 300 dpi. You can load these bitmaps on-the-fly into the browser through a dynamically created bitmap file (random/timestamp-based file name). As an alternative you can use also vector graphics via SVG format.

tbarcode -fIMAGE -iGIF -oBarcode.gif -b8 -m0.254 --dpi=100 -d"1234567890ABC"

tbarcode -fIMAGE -iPNG -oBarcode.png -b112 -m0.508 --dpi=300 -d"www.tec-it.com"

Quality optimisation:

• The module width (smallest graphic element in the code) was already adjusted to the pixel grid in the bitmap. At 100 dpi, 0.254 mm corresponds exactly to one pixel, at 300 dpi it is 3 full pixels (so there are no quantisation effects or rounding errors). At 300 dpi, a dot size of 0.508 mm corresponds to 6 full pixels (again, no quantisation effects).
• You can also specify a target value for the module width -m (or the total width -w) and use the internal optimization via the parameter --optimalwidth. The barcode can then become smaller than the target value, as it is always rounded down to full pixels.
• When displaying and printing, the resolution of the display and the printer are taken into account. Depending on the DPI, rounding errors may occur.

tbarcode -fSVG -oBarcode.svg -b112 -m0.762 -d"https://www.tec-it.com"

The vector format SVG is also supported, most browsers can display this by now. In SVG format, we also have a plain text line for 1D codes.

HTML integration:

With the SVG format, you can either load the SVG via an <img src="svg-url"> tag as with the bitmap or directly integrate it inline into the HTML as <svg> nodes (no extra image download required). For inline integration, omit the first line from our SVG file, you only need the <svg> node. The display size (viewBox) can also play a role.