How To Create SVG Paths Easily Using The GIMP

When writing my blog post about Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML, I needed to figure out how to create SVG paths from scratch. The problem is that they look so complicated and are not intuitive enough to produce by hand. However, I came across a cheap and simple way of creating SVG paths using the GIMP. People tell me I am also cheap and simple, so maybe that is why I love this solution so much. So, for the rest of you like-minded people, I would like to share this with you. :-)

1. Open the image you want to edit and use the select tools to remove parts of the image until you get the shape that you want to produce with your SVG path:
   
2. Next use the magic wand to select all the areas that you just cut out.
   
3. Now go to the Invert item from the Select menu.
   
   This will make the selection tool take the shape of the painted area, as opposed to the transparent area.
4. Now choose To Path from the Select menu.
   
5. In the Paths window, you will see a path has been created (it should be called Selection. Right click on the path and choose Export Path
   
6. Save the path on the filesystem.
   

If you have done this correctly, you’ll see this nice fresh snippet of SVG when you open up the file you just saved in a text editor:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="4.95in" height="4.17in"
     viewBox="0 0 495 417">
  <path id="Selection#4"
        fill="none" stroke="black" stroke-width="1"
        d="M 495.00,0.00
           C 495.00,0.00 495.00,417.00 495.00,417.00
             495.00,417.00 0.00,417.00 0.00,417.00
             0.00,417.00 0.00,0.00 0.00,0.00
             0.00,0.00 495.00,0.00 495.00,0.00 Z
           M 81.18,219.39
           C 75.28,224.66 73.26,233.55 71.61,241.00
             68.81,256.26 68.66,271.70 71.61,287.00
             72.76,294.37 74.47,301.98 79.68,307.70
             85.29,313.85 91.52,314.81 99.00,316.73
             99.00,316.73 126.00,321.96 126.00,321.96
             126.00,321.96 134.00,321.96 134.00,321.96
             134.00,321.96 144.00,323.00 144.00,323.00
             156.04,323.14 168.13,322.58 180.00,320.39
             187.27,319.04 193.58,317.17 198.20,310.91
             202.27,305.40 200.54,300.30 201.28,294.00
             201.28,294.00 202.00,244.00 202.00,244.00
             201.98,234.15 201.61,228.06 192.91,221.85
             187.58,218.04 176.56,216.51 170.00,215.41
             153.07,212.57 126.99,210.70 110.00,212.28
             101.11,213.56 88.05,213.25 81.18,219.39 Z" />
</svg>

Note the highlighted bit. This is an SVG path.

To see how I use these paths, take a look at my companion article Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML.