IMG 2 SVG

IMG 2 SVG: Converting raster images to scalable vector graphics using the GNU Image Manipulation Program (GIMP) and Inkscape

Note: This tutorial assumes the user has a basic knowledge of computers. Including but not limited to image processing software (Photoshop, GIMP, etc.), the internet, downloading and handling files, installing software, and using a mouse. It is also assumed that GIMP, Inkscape and a web browser are already installed. A functional internet connection will be useful. Versions used include GIMP 2.8.14 and Inkscape 0.48.5 r10040 both from the Debian Linux testing repository, pulled on 01 March 2015. Ubuntu, Fedora, Centos, OpenSUSE, Redhat, OSX, and Windows all have packages/installers for GIMP and Inkscape. Your mileage may vary.
In this example I used a PNG from the wikipedia article on the Futurama character Bender, http://en.wikipedia.org/wiki/Bender_(Futurama)

Launch GIMP:

1. File > Open [Figure 1]
2. Colors > Desaturate (I typically use lightness, but use what works best for you)

   Note: GIMP only operates on the selected area. Using a selection area may be useful for getting different thresholds in various places in the image

3. Colors > Threshold (you’ll have to play around to find the best values but auto does a good job of getting close most of the time) [Figure 2, Figure3]
4. Image > Mode > Indexed (select “Black and White 1-bit palette” ) and “Remove unused colors” (default) [Figure 4]
5. Remove any signature and unwanted artifacts (speckles, etc.). SVG conversion is difficult with such things or speckles in the image. You will see I have left some under Bender's cigar because they are intentional. [Figure 5, Figure 6]
6. Ensure you have permission or legal right to remove signatures/watermarks or ensure they get placed in the final image after conversion. You may wish to cut and paste the signature into a new image for use later.
7. Image > Zealous Crop ( I forgot this when making the walkthrough so my canvas sizes are a bit bigger, with more white space)
8. Save in gimp xcf format (for easy changes later) and export to png format (File > Export As). I change the name so as not to overwrite the original “bender.png” becomes bender.xcf and “bender_clean.png”. When exporting there is no need to save background color, creation time, or transparent pixel color values. [Figure 7]

Launch InkScape:

1. Open your file (File > Open > “Bender_clean.png”)
2. Using the arrow tool select your object
3. Path > Trace Bitmap
4. On the Options tab [Figure 8]
1. Disable suppress speckles
2. Enable smooth corners @ 1.00
3. Enable optimize paths @ 5.00
5. On the Mode Tab [Figure 9]
1. Select the colors radio button
2. Set scans to 2
3. Disable Smooth
4. Enable Stack Scans
5. Disable remove background
6. Press Update on the Mode Tab
6. Press OK. You now have a Vector Object on top of a Raster Object.
7. Move the Vector Object aside (use the select tool if needed) [Figure 10] 
8. Delete the Raster Object [Figure 11]
9. Select the Vector Object
10. Move the Vector Object to the home position using the X,Y coordinates in the toolbar [Figure 12]
11. Save as an SVG (I typically save as a “Plane SVG (.SVG)” rather than an InkScape SVG if I’m going to be using this image anywhere other than in Inkscape (e.g. webpages, Adobe Illustrator, etc.)
12. You can cut and paste the signature raster object from gimp directly into Inkscape if you need to. I copied the signature after desaturating but before converting from RGB to Black and White. [Figure 13]
13. Don’t forget to save again if needed.
14. ADVANCED TOPIC: ::INCOMPLETE:: If your going to color the image after word, The Inkscape fill bucket works similar to that of raster image programs but may leave a white ring between your outline and colors. The easiest (read maybe not the best) way to fix this is to break apart the vector paths.
1. Select the Edit Node Tool
2. Click on the outline vector object
3. Path > Break Apart
4. Select fill bucket tool
5. Select fill color
6. Click on empty area to fill