Page 8: SVG Exercise

Box 1: Exercise 5, SVG

Above is a big SVG that is empty. It is from the file 03-08-01.svg. (which is loaded by 03-08-01.html). Fill it in with an interesting picture (by editing the SVG file 03-08-01.svg).

You should make the picture by hand, i.e., edit the SVG in a text editor. Do not create or edit the picture in a picture editing tool (like Illustrator or InkScape).

You do not need to animate your picture. You do not need to do any JavaScript programming for this picture. You just need to put graphics into the file.

Your picture should make use of hierarchical modeling. It should have groups, transformations, and instancing. There should be more than one <use> tag that have transformations attached.

Here are the requirements:

1. You must use at least one path with an arc in it.
2. You must have a polygon that is not a rectangle.
3. You must create hierarchy using groups (<g> tags) with transformations. You need to have a group inside of a group (more than just primitives in groups).
4. You must use instancing (the <use> tag) and transformations to make multiple copies of something

If you’re stumped for ideas, you could try re-creating one of the Canvas pictures in the workbook (for example, the windmills picture - without the animation). You can see examples from prior years at Galleries.

Technically, the pictures on previous pages (for example SVG example 03-07-03.svg) satisfy many of the requirements. You can refer to this picture (you have the source code), but please make your own picture.

You should do this assignment by writing SVG. Don’t use JavaScript to create the SVG. And make a static picture: while SVG has interaction and animation capabilities, usually these are done with JavaScript, and that gets away from the goals of this assignment. Do not try to figure out SVG’s built in animation capabilities.