Making your own SVGs from XML

About half my class have made SVGs using Inkscape. This time around it actually seemed more convenient to make them in raw XML. I did have to plan the sequence of operations carefully. I was very happy with how this lesson turned out because there was a lot involved. This was a double lesson, which ran for 105 minutes.

Open these programs:

• HTML Kit, to be used as an XML editor, even though it's not strictly designed for that
• Word document which contains information about how to make various basic SVG shapes using XML
• Excel to record data about SVG co-ordinates
• Opera, which is still the best standards compliant browser for viewing the SVG

1) Introduction to what SVGs are and how they are useful

2) Introduction to HTML and XML

3) Today we are going to make an SVG in raw XML. I'll take you through how to do it as a preparation for you making your own SVG to replace the Sugar XO icon.

4) Here is the picture of a cat I have drawn on a 55*55 grid. I hand out copies of a cat drawn on a 55*55 grid on graph paper. The 55*55 grid represents the size of the canvas in pixels but keep your shapes to about 40*40 otherwise they will look too big on the Sugar GUI

5) The cat consists of various shapes:

• face is a circle
• eyes are two circles
• whiskers are 4 lines
• ears are two polylines
• mouth is one polyline
• nose is a path

6) Look in the word doc and you will see how these various shapes require co-ordinates

7) I now organise the class to get into groups with each group delegated to work out the co-ordinates of the above parts and to record the information on the whiteboard. This organisaton allows everyone opportunity to practice how to work out and publicly record the co-ordinate values.

8) As the information goes up on the board I check that the values are correct and then ask everyone to record the values in Excel. I explain that soon I will need to erase the board because I need to use the data show for the next step

9) Open Icon_template.generic.svg in HTML Kit and then save that file as cat.svg. The generic file contains the xml and DOCTYPE information, the canvas size and I have already sugarised it with the ENTITY stroke_color and ENTITY fill_color statements.

10) Now your job is to make the cat by copying and pasting how to do circles, lines and polylines from the Word doc and then inserting the correct values for the cat. I start them off on this using the data show, saving in HTML Kit and viewing in Opera step by step

11) After finishing the cat it was great to see some students immediately working to improve or modify it on their own initiative

12) Before the lesson finished some students had started working on their own icon by first drawing it in a graph paper grid.

Reference: The contents of the Word doc about SVG basic shapes were based on http://xo-whs.wikispaces.com/SVG