Page 8: SVG Exercise

CS559 Spring 2021 Sample Solution - Workbook 3

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6 and page 8.

Box 1: Exercise 5, SVG

Rubric for Box 1 (With how this example would have been graded)
  • a picture using SVG (Points:5) (5/5)
  • at least one path with an arc (Points:3) (3/3 for the circle at the center of the snowflakes)
  • at least one polygon that is not a rectangle (Points:3) (3/3 for the snowflake branches)
  • a hierarchy using grouping (Points:3) (3/3 for the branches and sub-branches)
  • repeated instancing via use (Points:3) (3/3 for multiple snowflakes)
  • artistic merit in the SVG picture (Points:3) (3/3 for making nice-looking snowflakes)

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

You can earn up to 3 “artistic merit” bonus points at the discretion of the grader. If the grader likes your picture, they will give you 1-3 bonus points.

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).

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.

This is the last page of the workbook. Of course, commit and push to GitHub often! When you are done with the workbook (and pushed the version you would like to have graded), complete the hand-in quiz on Canvas.

Page 8 Rubric (20 points total)
Points (17):
Box 03-08-01
5 pt
a picture using SVG
Box 03-08-01
3 pt
at least one path with an arc
Box 03-08-01
3 pt
at least one polygon that is not a rectangle
Box 03-08-01
3 pt
a hierarchy using grouping
Box 03-08-01
3 pt
repeated instancing via use
Bonus points (3):
Box 03-08-01
3 pt
artistic merit in the SVG picture