Convert a Monochrome Bitmap Image to a Vector Image

In my last couple of posts I've been writing about barcodes.  When generating them, some programs are able to output a vector image, which makes rescaling them later on easy, but some programs can only output a raster image of pixels.  Converting them to a vector image like an SVG file makes the work-flow easier.  So in this post I'll show how to convert a sample raster image to a vector image.

The sample image to convert is a simple 2D barcode.  It's made up of square elements 2x2 pixels in size.  The processing will be done in Inkscape and GIMP.

Image to convert to vector

The first step is to enlarge the image.  This is done because the conversion process only works if the edges in the barcode are long and straight.  You may have to try different values until you come across a size that works.  Enlarging the image by 500% was enough in this case.  It's also important to set the interpolation to "None".  This ensures that each pixel in the original image will exactly match a 5x5 group of  pixels in the enlarged image.

Resize image with no interpolation

Using the colour selector tool in GIMP, click on the colour you want to convert to a vector shape, in this case it's the black of the barcode.

Select Colour

In GIMP convert the selection to a path.

Convert Selection to Path

Open the path dialog box and right click on the path just created, then select "Export Path".  This will create an SVG file containing the barcode we are trying to convert.

Export Path to SVG

When opening the SVG file in Inkscape it'll look wrong.  At first, all that's shown is the outline of barcode.

SVG with Stroke on and No fill

To correct this, select the object, set the fill to black and then turn off the stroke (outline).  There you have it, an SVG file containing the barcode.  There is a "trace bitmap" function in Inkscape, but it seems to be oriented towards graphics.  When it comes to a doing pixel accurate tracing of an image, this seems to be the easiest way to do it.

SVG with Fill on and no Stroke