SVG Matrix Transform Mathematical Structure

This article provides an overview and technical breakdown of the mathematical structure behind the SVG matrix() transformation function. It details how the six parameters of the matrix(a, b, c, d, e, f) syntax represent an affine transformation matrix in homogeneous coordinates, explains the linear equations used to calculate transformed coordinate points, and demonstrates how standard SVG transformations—such as translation, scaling, rotation, and skewing—map directly to this matrix format.

The 3x3 Affine Transformation Matrix

In Scalable Vector Graphics (SVG), all 2D transformations are mathematically handled as \(3 \times 3\) affine transformation matrices using homogeneous coordinates. An affine transformation preserves collinearity and ratios of distances, ensuring straight lines remain straight and parallel lines remain parallel.

The general transformation matrix is structured as:

\[ \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \]

Because the bottom row of a 2D affine transformation matrix is always constant (\(\begin{bmatrix} 0 & 0 & 1 \end{bmatrix}\)), SVG simplifies the notation by omitting these fixed values. The function is written in SVG syntax with six parameters:

transform="matrix(a, b, c, d, e, f)"

Coordinate Transformation Formula

To transform an original point \((x, y)\) into a new coordinate \((x', y')\), the point is represented as a 3D homogeneous column vector \(\begin{bmatrix} x \\ y \\ 1 \end{bmatrix}\) and multiplied by the transformation matrix:

\[ \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} \]

Expanding this matrix multiplication produces two linear equations:

• \(x' = ax + cy + e\)
• \(y' = bx + dy + f\)

Parameter Roles and Components

Each parameter in matrix(a, b, c, d, e, f) controls specific transformation properties:

• a: Controls horizontal scaling and affects rotation.
• b: Controls vertical skewing and affects rotation.
• c: Controls horizontal skewing and affects rotation.
• d: Controls vertical scaling and affects rotation.
• e: Represents translation along the X-axis (\(\Delta x\)).
• f: Represents translation along the Y-axis (\(\Delta y\)).

The identity matrix—representing no change to the coordinate system—is defined as matrix(1, 0, 0, 1, 0, 0).

Mapping Basic Transforms to Matrix Notation

Every standard SVG transformation function is a specialized representation of this matrix:

1. Translation: translate(tx, ty)

Moves an element by \(tx\) along the X-axis and \(ty\) along the Y-axis. * Matrix: matrix(1, 0, 0, 1, tx, ty) * Equations: \(x' = x + tx\), \(y' = y + ty\)

2. Scaling: scale(sx, sy)

Scales an element by factors \(sx\) and \(sy\). * Matrix: matrix(sx, 0, 0, sy, 0, 0) * Equations: \(x' = sx \cdot x\), \(y' = sy \cdot y\)

3. Rotation: rotate(θ)

Rotates an element by angle \(\theta\) (measured in degrees, converted to radians for calculation) around the origin \((0, 0)\). * Matrix: matrix(cos(θ), sin(θ), -sin(θ), cos(θ), 0, 0) * Equations: * \(x' = x \cos(\theta) - y \sin(\theta)\) * \(y' = x \sin(\theta) + y \cos(\theta)\)

4. Skewing: skewX(α) and skewY(β)

Distorts an element along the X-axis by angle \(\alpha\) or along the Y-axis by angle \(\beta\). * Skew X Matrix: matrix(1, 0, tan(α), 1, 0, 0) * \(x' = x + y \tan(\alpha)\), \(y' = y\) * Skew Y Matrix: matrix(1, tan(β), 0, 1, 0, 0) * \(x' = x\), \(y' = x \tan(\beta) + y\)

Matrix Composition

When multiple transformations are applied to an element (for example, transform="translate(20, 30) rotate(45)"), SVG multiplies the corresponding matrices together from left to right. Because matrix multiplication is associative but non-commutative, the order of transformations determines the final matrix configuration.