SVG5: More Transforms and Composition

in SVG Tutorials
svg
Tutorials

This is part 5 of the 6 part SVG tutorial

Most of the things I’ve seen about SVG on the web are meant for designers who haven’t had a graphics class, so they are a little vague about transformation. The specification has all the details (including all of the kinds of transforms that are supported). However, it doesn’t specify how composition occurs.

SVG does allow transformations to be composed. You can put multiple transformations on any object.

Here is a simple example that uses composition without hierarchies. From it, you should be able to see how the order or transformations matters. You should understand why the blue and green stroked squares end up where they do. ( svg5-1.svg ):

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300px" width="300px" viewBox="-100 -100 200 200">
 2<!-- create the group - draw it untransformed so its not in a def -->
 3<g id="square">
 4    <rect x="-10" y="-10" height="20" width="20" fill="#cab2d6" stroke-width="0" />
 5    <polygon points="0,0 0,-10, 10,0" fill="#6a3d9a" stroke-width="0" />
 6    <rect x="-10" y="-10" height="20" width="20" fill="None" stroke-width="3" />
 7</g>
 8<!-- the same two transformations, just in different order -->
 9<use transform="translate(50,0) rotate(45)" stroke="blue" xlink:href="#square" />
10<use transform="rotate(45) translate(50,0)" stroke="green" xlink:href="#square" />
11</svg>
svg5-1.svg

A few things to make interpreting the SVG for this diagram a little easier (and tricks for your own experiments):

  • Notice how I use the “viewBox” parameter to the SVG file to set up a coordinate system with zero at the center.
  • Notice how I have the little mark in the upper right corner of the square so that its not symmetric, and you can tell how much things have been rotated by.
  • Because the shape that I draw (lines 5-6) are in a group, but not a def, they do get drawn without any transformation a first time (before they are used below).
  • Because I did not define the color of the stroke on the last square, it can inherit the color from its group (or from the “use” statement that instantiates it).
  • Notice that rotations in SVG’s standard coordinate system are clockwise. Since the Y axis goes down (not up like in a math class), this is still a right handed coordinate system.
  • If you don’t specify the origin of a rotation, it rotates about the origin.
  • You should be able to figure out what order SVG applies the transformations in. (spoiler: it’s the same convention we use in class)

Next: SVG6: Paths and Curves in SVG
Prev: SVG4: Groups, Transforms, Re-Use, and Hierarchies