Introduction to SVG


SVG Resources

Rectangles and Coordinates

The coordinate system starts at the top left corner. Positive y values move down towards the bottom. Positive x values move towards the right. We can use CSS to apply styles to the figures.


This is the most complicated SVG element, but also one of the most useful. It contains a tiny programming language.

Longer Paths

In-class project: Make a plot like Minard's.


Transformations are another useful (but a bit tricky) tool. How do we stretch, rotate, and shift elements, and how does the order of these operations affect the result?

Wrapping all elements in a translate() transformation moves the coordinate system. We often want to do this to add a margin around a plot while keeping our mapping from data to x,y positions simple.

First, let's mark the origin, (0,0).

Now let's move the origin to the center. The g tag assigns properties to sets of elements.

Let's create some circles in our translated space.

Let's perform a translation on one of the circles.

Let's both perform a translation and scale one of the circles.

The order matters! What happens if we scale first and then perform a translation?

Finally, let's try rotating our coordinate system.