SVG3: Manipulating Primivites

February, 2020

Hopefully, by this point, you have gotten the hang of creating some basic primitives using SVG. You can make simple shapes (rectangles, lines, circles, and a bunch of other things) using the appropriate tags. For now, you should be able to use a few different primitives. Later, we’ll want to use the path primitive – but you won’t need those now.

To style how these primitives look, you can either give attributes to the primitives (such as their fill (inside color) and stroke (outside color) and stroke-width (how much of a stroke they get), or put these into a style string. Here is a simple example:

1<svg xmlns="http://www.w3.org/2000/svg" height="40px" width="100px">
2    <rect x="10" y="10" height="20" width="20" style="fill:#a6cee3; stroke:#1f78b4"></rect>
3    <rect x="40" y="10" height="20" width="20" fill="#b2df8a" stroke="#33a02c" />
4    <rect x="70" y="10" height="20" width="20" fill="None" stroke="black" stroke-width="3" />
5</svg>

Some things to notice about this examples:

The first rectangle uses a style string – and puts all the style parameters into that.
The second rectangle uses separate attributes for the fill and stroke colors. It also closes the tag using the shorthand notation />
The third example makes a thick stroke, and has no fill. This is important because by default, objects do have a fill color – if you don’t want them filled, make sure to specify that. Also, no fill is different than filled with white – you can see through the no fill.
For the purposes of class, controlling the stroke and fill of primitives is enough. Although, you might want to look at some of the many options there are for styling the appearance of the primitives.

Groups

(Note: this is copied over from 2014, without much modernization)

You can take a group of things in SVG (for us, primitives and other groups) and group them together into a group. Properties applied to the group get applied to all of the things in the group.

1<svg xmlns="http://www.w3.org/2000/svg" height="40px" width="100px">
2    <g stroke="black" stroke-width="3">
3        <rect x="10" y="10" height="20" width="20" fill="#a6cee3" />
4        <rect x="40" y="10" height="20" width="20" fill="#a6cee3" />
5        <rect x="70" y="10" height="20" width="20" fill="#a6cee3" stroke="red" />
6    </g>
7</svg>

Here, notice that the properties assigned to the group (the thick black stroke) get applied to the rectangles within the group, except that the third one over-rides this and makes the stroke red.

It doesn’t seem like you can give position attributes to a group (like specifying the width and height for the objects in the group).

Transformations

We have seen how the SVG element allows us to define our coordinate system (in the last tutorial).

SVG also allows us to attach a transformation to any object (including a group). SVG allows for arbitrary affine transformations. (Don’t worry, you’ll learn about that in class). For now, we can just start out with a simple transformation: translation. This recreates the first picture, in a more verbose way.

1<svg xmlns="http://www.w3.org/2000/svg" height="40px" width="100px">
2    <rect transform="translate(10,10)" x="0" y="0" height="20" width="20" style="fill:#a6cee3; stroke:#1f78b4"></rect>
3    <rect transform="translate(40,10)" x="0" y="0" height="20" width="20" fill="#b2df8a" stroke="#33a02c" />
4    <rect transform="translate(70,10)" x="0" y="0" height="20" width="20" fill="None" stroke="black" stroke-width="3" />
5</svg>

There are other transformations built into SVG. Rotation is another simple one. However, by default it rotates around the origin of the current coordinate system, which may not be what you want. For example, adding the rotations to the first example gives us:

1<svg xmlns="http://www.w3.org/2000/svg" height="100px" width="100px">
2    <rect transform="rotate(45)" x="10" y="10" height="20" width="20" style="fill:#a6cee3; stroke:#1f78b4"></rect>
3    <rect transform="rotate(45)" x="40" y="10" height="20" width="20" fill="#b2df8a" stroke="#33a02c" />
4    <rect transform="rotate(45)" x="70" y="10" height="20" width="20" fill="None" stroke="black" stroke-width="3" />
5</svg>

Note that in this case, the rotation is applied before the translation (positioning), and that the rotation is about the origin.

The SVG rotation transformation allows you to specify where you want the center of rotation to be, which can be quite convenient in a situation like this, where I want to rotate each square about its own center.

1<svg xmlns="http://www.w3.org/2000/svg" height="100px" width="100px">
2    <rect transform="rotate(45,20,20)" x="10" y="10" height="20" width="20" style="fill:#a6cee3; stroke:#1f78b4"></rect>
3    <rect transform="rotate(45,50,20)" x="40" y="10" height="20" width="20" fill="#b2df8a" stroke="#33a02c" />
4    <rect transform="rotate(45,80,20)" x="70" y="10" height="20" width="20" fill="None" stroke="black" stroke-width="3" />
5</svg>

You can read about the various ways to specify transforms in SVG on this page.

Transforms become really useful when we combine them with groups. But that’s the next tutorial.

Next: SVG4: Groups, Transforms, Re-Use, and Hierarchies
Prev: SVG2: Coordinate Systems