How to define barcode objects in HTML and SVG

Barcodes and matrix codes are created through "barcode objects", which are a pdfChip specific custom type of <object>.

Such objects can be used in HTML content, inside SVG objects and inside SVG files (as of pdfChip 1.2, SVG files can be converted directly to PDF, without having to embed them in HTML).

Please note that when viewing an HTML file or an SVG file which contain a pdfChip barcode object, the browser will typically show a "missing plug-in" sign where the barcode or matrix code would be present, as pdfChip barcode objects are only supported for processing by pdfChip.

Defining a barcode object in HTML

An example for the syntax of a barcode object inside HTML is shown below.

Please note that the background-color and color attributes are used for demonstration purposes only. Normally barcodes and matrix codes would be printed in black (or a very dark color) on white (or a very light background).

Example

The example code below – which can also be found in the downladable HTML file "Data_Matrix_code_defined_inside_HTML.html" – creates a DataMatrix code by means of a barcode object inside HTML. The output is also shown below (the background color "pink" is only used for demonstration purposes. Normally using a white background is preferred).

<object xmlns="http://www.w3.org/1999/xhtml"
		type="application/barcode"
		style="margin: 0; padding: 0; background-color:pink; color: green;">
	<param name="type" value="Data Matrix">
	<param id="data" name="data" value="This Data Matrix code was created through a barcode object inside HTML">
	<param name="modulewidth" value="2mm">
	<param name="quietzoneleft" value="1">
	<param name="quietzoneright" value="1">
	<param name="quietzonetop" value="1">
	<param name="quietzonebottom" value="1">
	<param name="quietzoneunit" value="X">
</object>
Data_Matrix_code_defined_inside_HTML.html

Defining a barcode object inside an SVG object

An example for the syntax of a barcode object inside an SVG object inside HTML is shown below.

Please note that the background-color and color attributes are used for demonstration purposes only. Normally barcodes and matrix codes would be printed in black (or a very dark color) on white (or a very light background).

Example

The example code below – which can also be found in the downladable HTML file "Data_Matrix_code_defined_inside_SVG_object.html" – creates a DataMatrix code by means of a barcode object inside SVG which in turn is contained as an SVG object inside HTML. The output is also shown below (the background color "pink" is only used for demonstration purposes. Normally using a white background is preferred).

<h1>Data Matrix code defined inside SVG object</h1>
<svg width="250mm" height="150mm" xmlns="http://www.w3.org/2000/svg">
  <rect x="5mm" y="10mm" width="240mm" height="130mm" stroke="blue" fill="yellow">
  </rect>
  <foreignObject x="25mm" y="20mm" width="120mm" height="120mm">
        <object xmlns="http://www.w3.org/1999/xhtml"
                type="application/barcode"
                style="margin: 0; padding: 0; background-color:pink; color: green;">
			<param name="type" value="Data Matrix">
			<param id="data" name="data" value="This Data Matrix code was created through SVG">
			<param name="modulewidth" value="2mm">
			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
        </object>
  </foreignObject>
</svg>
Data_Matrix_code_defined_inside_SVG_object.html

Defining a barcode object inside an SVG file

An example for the syntax of a barcode object inside an SVG file – which can be processed directly by pdfChip – is shown below.

Please note that the background-color and color attributes are used for demonstration purposes only. Normally barcodes and matrix codes would be printed in black (or a very dark color) on white (or a very light background).

Example

The example code below – which can also be found in the downladable SVG file "Data_Matrix_code_defined_inside_SVG_file.svg" – creates a DataMatrix code by means of a barcode object inside an SVG file. The output is also shown below (the background color "pink" is only used for demonstration purposes. Normally using a white background is preferred).

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="250mm" height="150mm">
	<style type="text/css">
		@page {
			/* Size of the page, equivalent to MediaBox, origin always at 0/0 */
			size: 307mm 310mm; /* slightly larger than target format */
			-cchip-cropbox: 0mm 100mm 297mm 210mm; 
			/* crops @page-size (MediaBox) to the actually 
			intended page size for display and printing */
		}
	</style>
	<defs>	</defs>
	<rect x="5mm" y="10mm" width="240mm" height="130mm" stroke="blue" fill="yellow">
	</rect>
	<foreignObject x="25mm" y="20mm" width="80mm" height="60mm">
		<object xmlns="http://www.w3.org/1999/xhtml"
				type="application/barcode"
				style="margin: 0; padding: 0; background-color:pink; color: green;">
			<param name="type" value="Data Matrix"> 		</param>
			<param name="data" value="Created from SVG file."> </param>
			<param name="modulewidth" value="1mm"> 		</param>
			<param name="quietzoneleft" value="1"> 		</param>
			<param name="quietzoneright" value="1">		</param>
			<param name="quietzonetop" value="1">			</param>
			<param name="quietzonebottom" value="1">		</param>
			<param name="quietzoneunit" value="X">			</param>
		</object>
	</foreignObject>
</svg>
Data_Matrix_code_defined_inside_SVG_file_v2.svg