Most of the digital images and pictures you see on the web are raster graphics images or bitmaps (.bmp). A raster graphics image is simply defined with a grid of pixels that are set to certain colors. Raster graphics images are resolution dependent and cannot be made larger without loss of apparent quality. Therefore, for images that need to be scaled to higher resolution often it is better to use vector graphics.
Images that are rendered using vector graphics will scale to any size and still maintain smooth edges. This is ideal for dealing with things such as fonts and logos. Inkscape is an open source vector graphics editor that you can use to convert raster images to vector graphic images.
I will demonstrate how to use Inkscape to convert the Inkscape logo above into an SVG (Scalable Vector Graphics) image. SVG is a vector graphics file format.
First of all you will need to download Inkscape and install it. It’s available for Mac OS X and Windows, and of course with the source you can compile it on Linux and other platforms as well.
Once you’ve installed Inkscape, launch it and open the raster image you want to convert. In this example, I’ve opened the inkscape-logo.png file. You can see from the screenshot that the edges are not smooth. Converting it to an SVG file will allow us to scale it to any size, and maintain the smooth edges.
Select the entire image by navigating to Edit > Select All in the Inkscape menu or by pressing Ctrl-A on your keyboard. Then go to Path > Trace Bitmap – or press Shift-Alt-B on your keyboard. In the trace bitmap dialog, select Colors as the mode and be sure that Smooth is unchecked.
Click the OK button and the conversion will take place but the dialog box will be on the screen. Close the dialog box by clicking the X in the upper right corner. Next you have to get rid of the original image, which is lying beneath the trace you just performed. To view the original, go to Object > Lower to Bottom or press the End key on your keyboard.
Now the original jagged looking image should be on top. Click on it to select it and then press the Delete key on your keyboard. Now you should see the nice and pretty vector image with smooth edges. Next, save the file by navigating to File > Save As”¦ Give the file a new name, and be sure that the file type in the bottom right is Inkscape SVG. The image below was created from the SVG file I made.
When you do use your SVG images in web pages, you’ll want to convert them from SVG back to a raster image, just as I did in the image above. To do this, just go to File > Export Bitmap”¦ Not all browsers support SVG images, so you’re better off exporting SVGs to bitmaps. This way you will have your nice image and also be able to use it online.
Using SVGs makes a big difference when you scale the images to be much larger than the originals. Wikimedia Commons actually has a better SVG image for the Inkscape logo than I made. The Wikimedia Foundation has made an effort to make most diagrams and logos available as SVG files, to allow them to be used at higher resolutions without degrading the original content.
Are you aware of any other free tools that can convert raster images to vector graphics?
More articles about: