E-Mail: [email protected]
How to make the .SVG images for FoF created by Modda

Quick Description:

An easy tutorial that shows how to convert a normal image into a .svg format to be imported into the game Frets On Fire. I thought I would make a tutorial even though there are some others so here we go.

For starters, you will need a good knowledge of creating images in a program such as Photoshop, Paint Shop Pro or similar. This tutorial wont show how I created the images, but shows you how to convert the .svg format proccess. To even start with making these images I would suggest that you would have installed:

An image editing program such as Photoshop
Photoshop can be bought or you can download the trial version from If you cannot afford it or download it, there is a small sized freeware Java program called GIMP. Just google it. It is similar to the standard image editing programs.

Inkscape ( Used to create the .svg image format )
Inkscape can be downloaded from it's website at

Frets On Fire ( )

Let's get started

You can create your image in your image editing software or you can create the image in Inkscape from scratch, but it may take a while to get used to the programs usability. As an example, I will use the logo.png which I created in Photoshop. You can create your image in your image editing software or you can create the image in Inkscape from scratch, but it may take a while to get used to the programs usability. As an example, I will use the logo.png which I created in Photoshop for my Smooth mod.

After you have created your image, it is best to make it so there is no background layer or white, before you flatten your image, just delete the Background layer. This will delete any of the background that you don't need. If you forget to do this, it is not nessacary as you can use Inkscape to remove it, but sometimes it is not too accurate.

Save you image as a .PNG format so we can import it into Inkscape.

You can right click on your newly made image file in its folder and use 'Open With > Inkscape', or load up Inkscape and use the menu to access 'File > Open' to load your image.

I will quickly run through the Inkscape Toolbar so you get a rough idea on what tools we will use ( If you have not already figured this out ) The toolbar is pretty basic, standard image creation / editing tools, starting off with:

Select and Transform Objects (F1)

This is the 'selecting' tool which you can use to select parts of your images.

Edit Path Nodes or Control Handles (F2)

This is the tweeking tool to edit the paths of each section for the image.

The rest of the toolbar descriptions are listed in my next tutorial, you will most likely use the rest later on to create your own images in Inkscape.

Now that you have your image loaded up into Inkscape, we will convert it into the .svg format by selecting your image using the 'Select and Transform Objects' tool, this will place a dotted border around your image and you will also see the scaling arrows around it. With the image selected, use the menu 'Path > Trace Bitmap...'

A small window will now open and you are displayed with a heap of options and configuration. For now I will just show you how convert this one image using the color scan tool. The rest of the options quick descriptions can be found at my next tutorial.

Select the 'Colors' radio button and just to the right of that, adjust the 'Scans' amount to how many colors your image has. I am using 3 as it includes the white background even though I had removed it in Photoshop. You can check the 'Remove Background' option to fix this if needed. To see the result, use the 'Update' button and it will show you what the option is doing to your image. Another important note, depending on the outcome that you desire, the 'Smooth' filter will soften the image like an extreeme Anti-Aliasing or a few Blur filters applied. I usually have this option unchecked. After you can see your image in the preview window and it is looking 'normal', click the 'Ok' button. You can now close the Trace Bitmap window.

Select your newly made svg image and move it to the side to make the original visible. Delete the original by selecting it using 'Edit > Delete' or right click on it and use 'Delete' there. You should only be able to see you 'smooth' looking image now in the program.

This step is for the sake that you did not check the 'Remove Background' option and to give a brief on the 'Path Node' tool. With your image still selected, click the 'Path Node' tool and select the 'white' or 'background' by left clicking it. This will change the border slightly. Right click on the background and 'Delete' it. You should now be left with just the image with no white space surrounding it.

This tool is the same as using the Pen tool in Photoshop. If you select a part of your image you will notice that a heap of dots, lines and squars will show. Selecting these nodes, you can edit the image color layers.

Editing colors and Gradients

I want to make my image look a bit fancy, so I will add a gradient. Select the portion of the image which you wish to alter. If it did not select the right section, click in a variety of places and you will eventually find the section you need. With the part now selected, I can edit its color, gradients etc. by clicking the blank space or color next to the 'F: '. ( This 'F:' stands for the Fill of the selected piece, and the 'S: ' means the stroke for that selection. ( Small border around your selection. ))

In another tutorial, I will explain all the ways to edit and create gradients and further information for this section. But for now, I will add a gradient by selecting the 'Linear Gradient' button. In this window I did a quick 2 color gradient, this will instantly change the appearance of your selection.


I suggest you have a play around with the program to get to know its tools and how to use them correctly, or just take a look at my next tutorial which explains a lot of the tools and thier functions. You can access the 'Help > Tutorials' menu at the top of the window for a good walkthrough of the program.

Once you are happy with your image, we can now save it. As I am creating a new 'logo.svg' I will need to save it in the correct positioning. If you open up the original 'logo.svg' in Inkscape, you will see that the image is saved in the top left corner of the document.

You will need to save your image the same way by selecting your whole image, then menu 'Edit > Select All' then 'Edit > Copy'. Create a new Inkscape document and then use 'Edit > Pate In Place'. Now simply shift your document so it is centered to the top left corner, and 'File > Save' to save your image. ( Quickly I will add that you can Group your image so that it is as one whole and not seperate sections via the 'Object > Group' menu. )

So there you have it, you can now use this image within Frets On Fire and view it once you activate your mod in the mods menu in the game.

Related links to this tutorial:

Frets On Fire Developers:
Keyboards On Fire:
E-Mail Me: [email protected]
Pageviews: 468