IMG 2 SVG

Converting raster images to scalable vector graphics using GIMP and Inkscape.

Note: This tutorial assumes a basic working knowledge of computers, image-processing software, downloading files, installing software, and using a mouse. It also assumes GIMP, Inkscape, and a web browser are already installed. A working internet connection is helpful. The versions used for this original walkthrough were GIMP 2.8.14 and Inkscape 0.48.5 r10040 from the Debian Linux testing repository as of 01 March 2015. Ubuntu, Fedora, CentOS, OpenSUSE, Red Hat, macOS, and Windows all have packages or 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: Bender (Futurama).

Launch GIMP

1. Open the source image with File > Open.
2. Use Colors > Desaturate. I typically use Lightness, but use whatever works best for your image.

Note: GIMP only operates on the selected area. A selection can be useful if you want different thresholds in different parts of the image.

3. Use Colors > Threshold. You will need to experiment a little, but Auto usually gets close.
4. Change the image mode with Image > Mode > Indexed. - Select Black and White 1-bit palette. - Leave Remove unused colors enabled.
5. Remove any signature and unwanted artifacts such as speckles. SVG conversion is much easier without stray noise. In this example, I left some speckling under Bender's cigar intentionally.
6. Make sure you have permission or legal authority to remove signatures or watermarks, or make sure they get restored in the final image. If needed, you can cut and paste the signature into a separate image for later use.
7. Use Image > Zealous Crop. I forgot this step when I made the original walkthrough, so the canvas sizes shown here ended up with a little extra white space.
8. Save the working image as a GIMP .xcf for future edits, then export a .png copy with File > Export As. - I changed the names so I would not overwrite the original. - Example: 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.

Launch Inkscape

1. Open the cleaned image with File > Open > Bender_clean.png.
2. Select the image using the arrow tool.
3. Go to Path > Trace Bitmap.
4. On the Options tab:
5. Disable Suppress speckles.
6. Enable Smooth corners at 1.00.
7. Enable Optimize paths at 5.00.
8. On the Mode tab:
9. Select the Colors radio button.
10. Set Scans to 2.
11. Disable Smooth.
12. Enable Stack scans.
13. Disable Remove background.
14. Press Update.
15. Press OK. You should now have a vector object on top of the raster object.
16. Move the vector object aside, using the select tool if needed.
17. Delete the raster object.
18. Select the vector object.
19. Move the vector object back to the home position using the X,Y coordinates in the toolbar.
20. Save as SVG. I typically save as Plain SVG (.svg) rather than an Inkscape SVG if I plan to use the image anywhere outside Inkscape, such as on web pages or in Adobe Illustrator.
21. If needed, you can cut and paste the signature raster object from GIMP directly into Inkscape. I copied the signature after desaturating, but before converting from RGB to black and white.
22. Save again after any final cleanup.

Advanced topic: coloring the vector afterward

This section was incomplete in the original post, but the main guidance still stands.

If you want to color the image after conversion, the Inkscape fill bucket works somewhat like fill tools in raster image editors, but it may leave a thin white ring between the outline and the filled areas. A simple, if not always ideal, workaround is to break apart the vector paths first.

1. Select the Edit Node tool.
2. Click the outline vector object.
3. Use Path > Break Apart.
4. Select the fill bucket tool.
5. Choose the fill color.
6. Click inside the empty area you want to fill.

Surviving example images

Note: Several step-by-step figure screenshots from the original post were no longer retrievable from their legacy Google-hosted URLs during migration. The tutorial text has been preserved, and the remaining local example images and SVG output are retained below.

Original raster source

Cleaned raster image prepared for tracing

Example SVG output