vecorize_banner

It may happen in some cases that you want to work with vector images, but the starting images are bitmaps, this small tutorial explains how to transform a Bitmap image (GIF, JPEG, PNG) into vector graphic (SVG) .

Bitmap, Vecor, what is it ?

To don’t make any mistake here are the definitions proposed by Wikipedia:

  • A bitmap image is a digital image data in a format that consists of an array of pixels or color dots, usually rectangular, which can be visualized on a computer monitor or other display device RGB (red, green, blue).
  • A vector image is a digital image composed of individual geometric objects (line segments, polygons, arcs, etc.) each defined by various attributes of shape, position, color, etc.

(http://fr.wikipedia.org/wiki/Image_matricielle and http://fr.wikipedia.org/wiki/Image_vectorielle)

The main advantage of working on Vector images, is the fact that we can apply all kinds of transformations (rotations, stretching, …) without loss of quality.

For example here is the difference between a bitmap that has been enlarged N times (left) and the same operation on a vector image:
australie_128 australie_svg_128

Prepare the Bitmap (The Gimp)

australie64We start from this, we will try to create a vector image, there are however some preliminary steps to do to ensure success of this operation. We have seen that a vector image is described by a succession of shapes in different colors, so fewer colors there are in image, less the vector image will be complex.

Looking at the pictures from the properties in The Gimp: Menu->Image->Image Properties
c0_props_sm

We realize that it includes 175 colors, visibly there are only yellow and black. It is appropriate to lower the number of colors. Personally I spend the image in RGB mode: Menu->Image->Mode->RVB, then I will return to indexed mode : Menu->Image->Mode->Indexed colors.
c1_nbcol_sm

Here I force the color depth to 4 which seems sufficient, I record the image under the australie_less.gif name. So we have a Bitmap picture (64x64px) containing only 4 colors instead of 175.
australie_less

Transform image into Vector (Inkscape)

We are now going through the software Inkscape to create a new image 64x64px, for that you must click on: Menu->File->Document properties.
c2_inkprops_sm

Then imports the bitmap file, you must then click on: Menu->File->Import, select our image australie_less.gif.
c3_inkimport_sm

Then it asks if you want to link or embed the image, select “incorporate”, then move your image to right to be almost equivalent to the image below.
c4_inkstep1_sm

PTo convert the bitmap to vector, select it (click on it) and then click on : Menu->Path->Trace Bitmap
c5_inkvecto_sm

Here the settings i use:

  • Vectorization by color
  • Indicate the number of passes at least equivalent to the number of colors in the image

Moving the new image created for it enters into the canvas.
c6_inkvecto2_sm

So the bitmap can be deleted, and if you click on the map of Australia we see the vector shape.
c7_inkpoint_sm

Then justĀ save the job into australie.svg

Remarks

We have just seen that the vectorization operation of an image is very simple, however I would give some tips:

  • Do not attempt the operation with a too complex image because if there are too many colors the result is likely to be catastrophic
  • Be careful to minimize the maximum number of colors
  • Always use when vectorization a number of passes at least equivalent to the number of colors in your image

There, that’s done, have fun.

Note that the images of this post are distributed under license Creative Commons By Sa.

Leave a Reply

Your email address will not be published. Required fields are marked *