Assignment 2: SVG and Transforms

by asperling on February 9, 2015

This assignment is due on Monday, February 16.

You will turn this assignment in on Moodle


The real goal is to get you to experiment with making SVG files using transforms (and grouping and re-use) to help build your intuitions and give you some practice at using transformations. In a sense, what I’d really like to do is say “spend a while and play with transforms.” Giving specific things for you to do kind of seems like busywork.

So, what we’d like you to do is make some pictures that use transforms. Experiment with them to see how they work, how they change objects, how they compose to make more complicated transformations, how you can use hierarchies of transformations to build more complex objects. You’ll probably make a lot of pictures in the process of doing this (or, you’ll make a picture, change it a little and look at it again, …).

What we’d like you to hand in is a few SVG files with some pictures that show that you’ve made use of a few different things.

Some More Specific Goals

In your experimenting, you should try …

  1. Making use of all of the different kinds of transforms available (rotate, translate, scale, skew, matrix).
  2. For the less common ones (especially skew) see what you can do with them that might be useful.
  3. See what happens when you change the center of scaling / skewing. Note that unlike for rotations, the skew and scale transformations do not take their centers as an (optional) argument. So, you’ll have to achieve the effect by composition.
  4. Try composing transformations to see how they compose. Find an example where reversing the order of transformations does a different, but still useful result (e.g. you see both). (Bonus challenge: find a set of 3 transformations where all the different orderings give different results)
  5. Build an object with multiple levels of hierarchy (a fleet of cars each with wheels …)
  6. Take a transform that is built as a composition of translates, rotates and scales (at least 1 of each) and re-write it as a “matrix” form transform (where you give the 6 numbers)

You should turn at least 2 (but no more than 5) pictures. The set of pictures should demonstrate each of these things at least once. You could create 1 picture that does all six, but we are requiring you to turn in at least 2 SVG files (since part of the assignment is to work out the logistics of turning in multiple files).


To give you some ideas of things to try doing with transformations, we will give you a list of puzzles to figure out. This list will grow, so check back. You don’t have to do these, but they are probably good practice.

We’ll give you some sample solutions to the puzzles to see what the answers should look like. You can peak at the answer (by using view source in the browser), but that wouldn’t be any fun.

  1. Create a ring of touching squares (or nicer objects) using only 30 degree rotations (and no numbers that aren’t integers). here’s what it should look like (don’t peek at the source!).
  2. Create a circle of arrows, one at each one of the 8 compass points (north, northeast, east, …). Without needing irrational numbers (like sqrt(2)).
  3. Convert a viewBox parameter (for the SVG) into a translate/scale combination
  4. Create a transformation that scales an object in an arbitrary direction by some amount, but doesn’t scale the object in the direction perpindicular to that.


Handin Instructions:

For this assignment, you need to hand in multiple SVG files. We ask that you name them (as described above) and combine them into a single ZIP file. If you don’t know how to create a ZIP file, please ask the TA. Figuring out this handin mechanic (how to turn in a ZIP file containing multiple, appropriately name files) is part of this assignment since we’ll need it later.

Please make each SVG file 300×300 pixels (the height and width in the SVG tag). Remember, if you make a picture a different size, you can always use a transform to fit it into the correct size.

In the text box type-in for the assignment, please give a brief description of how your files fulfill the requirements of the assignment, for example:

picture1.svg uses a hierarchy of transforms to assemble the parts of the boats and to place them, picture2.svg combines transformations to solve puzzle 2, …

Upload the ZIP file to the assignment page on the class Moodle.

Grading Scale:Nothing, Something, Everything (completed all parts), Above and Beyond(completed all parts in a cool way)

Previous post:

Next post: