Converting Bitmaps to Programmable-Ready SVGs
Considering how much I like to incorporate SVGs in the web design domain, I thought it fitting to organize a small how-to outlining the steps for creating SVG from Bitmaps that are relatively easy to program. This technique uses InkScape simply because the save options give you control over the parameters that really matter for a web-ready doc.
1. Convert the Bitmap To begin, have your image formatted as a bitmap with a .bmp extension.
- Open the image with Inkscape. - Select the image with the selector tool. - From the menu, select Path > Trace Bitmap. The options window contains parameters for generating a vector graphic. The section which is important is the Multiple Scans area. In this area, you can select how the paths of a vector graphic are organized; colors, grays, etc. the Scans option basically will partitions the number of paths into layers. The higher number of scans, the more paths, finer detail and, of course, larger is the file. You can preview the level of detail by updating your setting in the preview box of the right. Then, to apply the changes press OK.
When the changes are applied you may close the dialogue window. The trace will already be selected, so you can cut-and-paste the vector to a new file, etc. The original bitmap is still underneath your trace. If you selected the Remove Background checkbox, then your image background should be transparent. You can easily confirm this by placing the image on a colored background. If it is still white, try and select the white background and delete it. It is just another layer in your image, so it can be removed. 2. Format the Document Inkscape is a little funny when it comes to document properties. Even if you select no borders when opening a new document, it can still have an artboard or border settings that are different for the image you import.
FIle > Document Properties
From the custom sizes drop down, click Resize page to drawing of selection. If there is a border, it will be resized.
3. Export an Optimized SVG
Software, particularly Adobe, likes to place unnecessary code into files. Often, it is best practice to clean SVGs with a program like SVGCleaner. However, an option provided by Inkscape allows you to save a file as an Optimized SVG from the drop-down menu of the save dialogue box. In comparison to a clean program, it is not that much larger.
File > Save As > select Optimized SVG
A window will prompt you with options. These are important considerations to make and easy to figure out. Just click the Help tab and an explanation for each field is provided.
The choices I have selected are fairly obvious with some notes.
Style to XML - puts the color, fill, opacity, (e.g. the CSS you can apply to your SVG, as an attribute in the XML. Group collapsing - basically means nesting the XML into groups. viewboxing - means a viewBox attribute is added to the SVG element with 100% width. (You want responsive design?) Strip xml prolog - this is basically an extra XML tag that makes the browser barf. It is perhaps best to remove it.
The Inkscape Layer Advantage When you save the SVG, the code will look something like this:
At the top of the screen capture, you see a <g> tag which means group followed by inkscape:groupmode="layer". This is obviously the layer you created in Inkscape. So, from organizing your inkscape layers, you can setup the parts of the image you want to isolate for your programming. The next attribute is the id which you can use for setting the styling, scripting, etc. It is easy enough to view the structure of an SVG and isolate the paths with developer tools.
the children of the SVG element will reflect the layers you created in the Inkscape file. They will be g elements assigned an id such as, id="layer8". The number of scans you created via the tracing process, will be nested underneath in a SVG grand-child group (g element). The paths will be organized based on the parameters you selected before scanning. For example, if you scanned 4 times based on colors or grays, there will be 4 paths, each having a fill attribute.
The structure of the tree will follow something like this: <svg> <g> <g> <path> <path> </g> </g> </svg>
For the most part, the CSS which can be applied to SVG are: fill, stroke, opacity, width, height, and some others. Well, just review the W3 standards. Other events, filters, etc... can be developed with JS or JQuery. The important point is that SVG is part of the DOM and layers can be treated as such, meaning various types of interactions and dynamics can be introduced in a straight forward way.