I’ve been using the GNU Image Manipulation Program (GIMP) for years, but never tried making a simple SVG with it. It’s surprisingly straightforward. Here’s how to do it in 7 easy steps:

1) File -> New -> create your image.
image image


2) Paint some stuff.
image


3) Select the bits with the fuzzy select tool - found in the toolbox - (hold shift to add seperate bits to the selection).
image
image


4) Go to the Select menu, click To Path.
image


5) Open the path window. (The circled tab in the image below)
If you can’t find your Paths/Layers window, you can click Windows -> Dockable Dialogs -> Paths.
image


6) Right click -> Click Export Path.
image


7) A window will pop up prompting you where to save your svg.


And that’s it for making a simple SVG, but since I want it here on my website, I will:

  • Open up the saved svg in notepad or something similar.
  • Copy and paste the <svg>...</svg> into the web page. (It might be quite a lot of lines!) image

And here’s the final result:

You can also modify values of the path to change how it looks, in the below example I modified the values of ‘fill’, ‘stroke’, and ‘stroke-width’.

Easy peasy!