SVG3: Manipulating Primivites

January 10, 2022 (Last Modified: January 19, 2023)

The way we make pictures with an object-oriented (or vector) graphics library like SVG is by creating primitives - the basic shapes that the API knows how to draw. So far in this tutorial, the examples have just drawn rectangles and circles. SVG has a range of primitives that you can use.

The Mozilla SVG Tutorial: Basic Shapes describes the main primitives in SVG. We’ll discuss the path primitive later (on page SVG6: Paths and Curves in SVG).

Now is probably a good time to get the hang of making drawings using the basic primitives. 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.

Styling Primitives

To style how the 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 ( svg3-1.svg ):

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 example:

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

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. ( svg3-2.svg ):

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. ( svg3-3.svg ):

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: ( svg3-4.svg ):

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. ( svg3-5.svg ):

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