Pallas Athena

Bases and Affine Transformations: The Linear Algebra Behind SVG Graphics

Recently I had to debug an interactive SVG artwork of mine to enable camera effects like zooming and panning. To do so I added a bunch of test scaffolding to my usual framework code. At the end of the day the scaffolding (to me anyway) seemed almost as cool as the artwork itself so I wanted to capture it in a blog post. And here we are.

The other cool thing about the effort is that in working through the debug session I gained new insights into the mathematical concept of bases and basis vectors in vector space. When I first studied linear algebra and other maths like discriminant analysis I remember coming across the concept of mathematical bases and, full disclosure, back then I felt a bit challenged trying to wrap my brain around the topic. To me notions around basis vectors is pretty heady stuff. Working now in SVG though, I feel I have a much better basis through which to grasp the concept (no apologies)!

Conversely, I feel that understanding basis vectors makes manipulating SVG graphics much more intuitive. And, of course, by extension, 3D computer graphics too. Off we go!

What's a basis in math?

Bases is one of the most fundamental concepts in linear algebra. That said, it's not the easiest notion to fathom at first.

A basis is a set of vectors that allows you to uniquely represent every other vector in that space as a linear combination of the basis vectors.

Let's get into it then...

Defining a Basis

A subset $B = { \mathbf{v}_1, \mathbf{v}_2, \ldots, \mathbf{v}_n }$ of a vector space $V$ is a basis for $V$ if it satisfies two essential properties:

  1. It spans $V$: Every vector $\mathbf{u}$ in $V$ can be written as a linear combination of the vectors in $B$. $$\mathbf{u} = c_1\mathbf{v}_1 + c_2\mathbf{v}_2 + \cdots + c_n\mathbf{v}_n$$ where $c_1, c_2, \ldots, c_n$ are scalars (real numbers).

  2. It is linearly independent: This means the only solution to the equation $$k_1\mathbf{v}_1 + k_2\mathbf{v}_2 + \cdots + k_n\mathbf{v}_n = \mathbf{0}$$ is $k_1 = k_2 = \cdots = k_n = 0$.

If a set satisfies both, it forms the "skeleton" of the vector space.

The Standard Basis

The most common example is the standard basis for $\mathbb{R}^n$. In 2 dimensions, for $\mathbb{R}^2$ (the $xy$-plane), the standard basis is $B = { \mathbf{i}, \mathbf{j} }$, where $\mathbf{i} = \begin{pmatrix} 1 \ 0 \end{pmatrix}$ and $\mathbf{j} = \begin{pmatrix} 0 \ 1 \end{pmatrix}$.

On that basis, any vector, say $\mathbf{u} = \begin{pmatrix} 3 \ -2 \end{pmatrix}$, can be written as:

$$ \mathbf{u} = 3\mathbf{i} - 2\mathbf{j} = 3\begin{pmatrix} 1 \ 0 \end{pmatrix} + (-2)\begin{pmatrix} 0 \ 1 \end{pmatrix} $$

Coordinates

The great value of a basis is that it gives you a coordinate system.

If $B = { \mathbf{v}_1, \ldots, \mathbf{v}_n }$ is a basis for $V$, then for any vector $\mathbf{u} \in V$, the unique scalars $c_1, \ldots, c_n$ such that $\mathbf{u} = c_1\mathbf{v}_1 + \cdots + c_n\mathbf{v}_n$ are called the coordinates of $\mathbf{u}$ relative to the basis $B$.

The general case in vector math notation:

$$[\mathbf{u}]_B = \begin{pmatrix} c_1 \ c_2 \ \vdots \ c_n \end{pmatrix}$$

Dimensions

The number of vectors in a basis is a fixed property of the vector space, regardless of which basis you choose. This number is called the dimension of the vector space $V$, denoted $\text{dim}(V)$. For example $\mathbb{R}^2$ has dimension 2.

Discussion and Application

As a visual thinker I usually try to visualize concepts as well as verbalize them. Lately I try to express them mathematically as well. But when I get into concepts like spans, linear independence, co-linearity -- stuff like that taxes my meager perceptions. Common folk like myself have trouble visualizing dimensionality beyond 3.

But as I worked on the SVG coordinate space problems for my framework I came out with a new appreciation and visualization for working with bases in math.

Bases in SVG

In 2D linear algebra (as we just saw) a basis is a pair of vectors $\vec{e_1}$ and $\vec{e_2}$ that define the coordinate axes of your space. Any point, $P$ can be expressed as a combination of the basis vectors:

$$ P = x \cdot \vec{e_1} + y \cdot \vec{e_2} $$

Where $\vec{e_1}$ and $\vec{e_2}$ can be expressed in the standard basis as

$$ \vec{e_1} = ( 1, 0 ) $$

and

$$ \vec{e_2} = ( 0, 1 ) $$

Affine Transformations

The concept of a basis is very closely related to affine transformations in SVG.

An Affine Transformation is a function $T(\mathbf{v})$ that preserves points being on a line (collinearity) and preserves the parallelism of lines.

Mathematically, a 2D affine transformation is defined as:

$$ T(\mathbf{v}) = A\mathbf{v} + \mathbf{b} $$

Where:

  • $\mathbf{v}$ is the original vector (point in the plane).

  • $A$ is a $2 \times 2$ matrix that represents the linear transformation part (scaling, rotation, shearing).

  • $\mathbf{b}$ is a $2 \times 1$ vector that represents the translation (shift).

Affine transformations preserve ratios along lines (so midpoints stay midpoints), but not necessarily distances or angles.

The Transformation Matrix and the Basis

The $2 \times 2$ transformation matrix

$$ A = \begin{bmatrix} a & c \\ b & d \end{bmatrix} $$

tells you exactly where the standard basis vectors $\mathbf{i} = \begin{pmatrix} 1 \\ 0 \end{pmatrix}$ and $\mathbf{j} = \begin{pmatrix} 0 \\ 1 \end{pmatrix}$ land after the transformation.

  • The first column $\begin{pmatrix} a \ b \end{pmatrix}$ is the image of $\mathbf{i}$.
  • The second column $\begin{pmatrix} c \ d \end{pmatrix}$ is the image of $\mathbf{j}$.

The transformation matrix $A$ is fundamentally a representation of how the transformation changes the basis of the coordinate system.

Homogeneous Coordinates in SVG

SVG (and computer graphics in general) uses homogeneous coordinates to combine the linear part ($A\mathbf{v}$) and the translation ($\mathbf{b}$) into a single matrix multiplication.

For affine transformations in 2D SVG uses a 3$\times$3 matrix:

$$ T = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} $$

The matrix can be applied to any and all points to transform a graphics element:

$$ x' = ax + cy + e $$

$$ y' = bx + dy + f $$

Where:

  • a,b,c,d handle linear transformation (scaling, rotation, shearing) to create a new basis and

  • e and f handle the translation of the newly created basis (i.e., moving the new basis some distance from the origin)

Live Interactive Illustration

A touch! 'tis but a touch!
Figure: Debug scaffolding on The Word Tree by 𝒩. I've embedded the interactive artwork here as a visualization to better understand the concept of bases in mathematics. As I stated, I'm a visual thinker so to nail down the math I need to turn it into diagrams and illustrations. At play in this illustration are essentially two coordinate systems which can be described mathematically as bases; the *global* (SVG world) coordinates (shown in blue) and a local system (shown in red) which I set up to simulate camera zoom and panning. When this blog page loads, initially the bases are identical. But if you play with the artwork (double click or pinch to zoom) you'll see that a new basis (coordinate system) is created for the camera that scales it up. Further, you can move (translate) the new basis by dragging with your mouse (or touch if you're reading this on mobile). This sort of scaffolding is essential for artists and visual thinkers like myself to create interactive artworks with creating coding practices.

Summing it all up

In summary:

  • The 2D SVG coordinate system can be described as a mathematical basis.

  • Affine transformations redefine the local coordinate systems of SVG elements by creating new bases and shifting their origins.

Resources

  1. Ivan Savov, No Bullshit Guide to Linear Algebra (2nd ed., Minireference Co., 2020).

  2. SVG 2 Specification, §8: Coordinate Systems, Transformations, and Units (W3C).