Convert Your Logo From BMP to SVG, Free!

My friend has a service business here in Lee County, Florida. His business is doing well and he gets quite a bit of work using simple word-of-mouth advertising. That’s great, but when I think about the out-of-town folk showing up for a limited time and needing emergency clean-up and the like; I know he’s losing a lot of business to national chains with recognizable names. He needs a web presence and search engine placement to get him on the first page when those potential customers use a search engine. No one uses phone books any more – now it’s all search engine. Search engine, search engine, search engine.

[Image 1]Bitmaps are great if the image is always going to be the same size, zoom in and there’s a problem.

His is a truly small business. He has business cards, letterhead and the like. He sent me the only artwork he has, which he created himself a while ago. It’s small and it’s bitmap, meaning it’s made up of millions of tiny dots – each with its own value – compressed into a file. As Image 1 shows, when stretched out a bitmap image becomes pixelized and begins to have steps and staircases all over it. Not good enough.

It’s a great logo! Unfortunately it’s not in a very useful format. When we need to make it bigger (like on the web site) it will look very unprofessional. The first thing we need to do is convert it from a bitmap to scalable vector graphic (SVG). The primary difference between the two is the way they hold the image information. An SVG uses math and curves to delineate where the edges of an object are. As the object is scaled the curve stays the same it just grows along with it, keeping the exact same proportions.

[Image 2]SVG images are smooth and can be resized for any purpose.

Let’s get started.

I’m going to use Inkscape for a couple of reasons. First, it’s cost free software which also respects its user’s software freedom. Second, it runs on pretty much anything, meaning Windows, Linux and Mac computers. This means you can do this yourself if you like. You can start immediately and it won’t cost you a dime.

Here’s a picture of what we’re trying to achieve. Image 2 shows a smooth image that stays smooth no matter how large or small we make it. This will enable us to use the logo for printed materials like business cards or banners (think trade shows), as well as the world wide web.

[Image 3]Embed the bitmap

Launch the Inkscape program and open the bitmap image. When asked, select “embed” since that will bring the entire image into the Inkscape program so we can work with it.

Zoom in or out until the entire image is visible in the main window. In the case of the image I’m working with the white background it’s been placed on is also part of the bitmap. No matter what type of bitmap you’re working with there will be a background of a certain size around it. This is because bitmap images do not support transparency. Select the entire image and from the menu selections use PATH => TRACE BITMAP … This will bring up a dialog box with a lot of different options. You can read about Inkscape and tracing options in greater detail elsewhere. Experiment as much or as little as needed.

For this case adjusting the brightness cutoff threshold is all that’s needed because there’s a definite difference between white (the background color) and elements of the bitmap image. Adjusting and clicking “update” reveals a preview of what the tracing result will look like. When it’s where I want it I just click OK.

[Image 4] Adjust the brightness cutoff threshold until you get the desired result – then click OK to create the SVG layer

The brightness cutoff threshold uses the sum of the red, green and blue (or shades of gray) of a pixel as an indicator of whether it should be considered black or white. The threshold can be set from 0.0 (black) to 1.0 (white). The higher the threshold setting, the fewer the number pixels that will be considered to be “white”, and the intermediate image with become darker. Experiment until you feel like you’re going to capture what you want, then click OK.

The SVG version of your Bitmap image will appear on a layer on top of the bitmap. You can click and drag it off by itself. Notice it’s black and we want the capital “A” to be red. This won’t be possible yet since the whole SVG is one image. Anything we do to the “A” will happen to the entire SVG image – we’ll need to break it apart first

The top image is the original bitmap. After creating the “trace” we just dragged the resulting SVG down with the mouse so you can see the difference.

We don’t need the original bitmap image any more so we can either delete it or just copy the SVG to a new instance. Either way we’ll be working exclusively with the SVG we created. We’ll be creating individual objects out of this one object first. This is necessary so we can change the color of one object without affecting the entire image. This is done using PATH => BREAK APART and works well. The result looks weird until you realize that all the closed curves within the image are also objects. The ‘doughnut hole’ in the center of the letter is itself an object with a specific path. First I’ll break the image apart into different objects and then I’ll color the ‘holes’ a different color so you can see what I mean. Mouse-over each of the four images below for an explanation of what’s going on. Click on them for larger views.

Once you’ve removed all the yellow parts you’ll end up with an SVG made up of different objects – each of which can be independently manipulated. Let’s make the letter “A” red by selecting it alone and then selecting red from the color pallet below. Three clicks is all it takes.

Click on the pointer icon in the upper left, then the object (letter “A”) and then the color you want to change it to.

Finally, we now have an actual scalable vector graphic of the company logo. We should use FILE => SAVE AS … and save it as an “Inkscape.svg” file for future use. We can also “export” it using Inkscape and that will allow us to save it as a bitmap or rasterized (.jpg, .png) file in any size we like.

Using the steps above we were able to use a tiny bitmap image to create this header for the new business website

Please stop by my friend’s new site – it’s in the early work-in-progress phase of development but it’s coming along nicely. Also, feel free to leave comments below. Let me know if we missed anything.

3 Responses to Convert Your Logo From BMP to SVG, Free!

Nice tutorial Frank. I love vector graphics. I’ve loved them since the early days of CorelDraw 1.0. Now you can also use SVG graphics in your web site because browser support has greatly improved. As the use of “retina” or HiDP reolutions and mobile/tablet screens increase, SVG graphics will become more important. Web sites need to be more flexible than ever before and ideally bitmaps should be replaced with CSS and vector images wherever possible except for photos. We are not quite there yet, but it is gradually moving in that direction. It’s nice to have a free open source SVG editor like InkScape around. Learn more at: http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i

Simply wish to say your article is as astonishing. The clearness in your post is just cool and i could assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the gratifying work.