more complex SVG icons

Moving on now to making SVGs which use paths to draw arcs and / or bezier curves. These are harder to do than the basic shapes but I did want to give the students the tools to do something more sophisticated.

Here are a few that I have done myself:




I ask students to complete a drawing on graph paper first since they are writing svg / xml directly, not using an inkscape or some other GUI. Doing this drawing first definitely is more efficient than trial and error.

Here is how I assessed the students for this task:

• quality of design (elegance, complexity), show graph paper (5 marks)
• icon successfully replaces XO icon (4 marks)
• colours can be reset within sugar, see page 1, point 8 (3 marks)
• cropped screenshot of your new icon posted to your blog with a description of what you have done. (4 marks)

Here is some student work. Read the student's blogs on the sidebar for more details about what they did, some problems they had and how they felt about it:
One of the interesting problems here was: A couple of students spelt "color" (American convention) "colour" (British / Australian convention) in the &fill_color; and &stroke_color; instructions. These instruction are for enabling the colour changes within Sugar. Because this was inside quotes within the xml the Opera browser (which we used for viewing the icons) error checker did not pick it up but it meant that the icon disappeared completely (not in the Opera view but in the Sugar view). This error took a while to detect. For other error checking Opera was very good.

The other main problem students had was figuring out how to use the vi editor without trashing the python file they were working on. It was important for me to have some spare SoaS sticks in this regard. I had to re flash several sticks during this exercise which was a pain for me.

update 13th September:
Another interesting problem that arose was that in Sugar svg paths for arcs don't accept decimal values. The icon ends up being smudged all over the place in a green colour. An example of something that should work but doesn't in sugar is:

< !-- Arms CREATES ERROR , paths don't take decimals in sugar, replace with beziers
<path d="M 18 35 A .5 .1 15 0 0 18 38" fill="red" stroke="&stroke_color;"/>
<path d="M 37 35 A .5 .1 -15 0 1 37 38" fill="&fill_color;" stroke="&stroke_color;"/<-->

The .5 and .1 values cause the problem. Decimal values work ok for other svg elements