Monday, August 31, 2009

Creating an SVG and changing Sugar XO icon

The past week my Control Tech class has been using HTML-Kit to make an svg(scalable vector graphic) picture file. The class made the pictures by using cordinates with a 55x55 graph.

Here is my original icon that i made using the cordinates and my colours.

An example of the cordinates are
These are the cordinates for my smiley face.

This was our first task. Our second task was to replace the original XO icon with our own icon ( mine is the hammer at the top ).
To change the icon we used the terminal program in Sugar, replacing the XO file with ours.

I manged to complete the task here is my icon replacing the XO

Another task we had to do was to be able to change the colour of the icon like the XO icon, i also was able to do this. To change the colour we had to change our cordinates, the stroke and fill.

Changing them to stroke="&stroke_color;" or fill="&fill_color;"

here is an example of the colour change from the first one.

Thanks for reading,


  1. good but I can't see the co-ordinate values

  2. Hey Dude, any chance you could please help me by saying where is the icon? what is the path to change the svg file?