How SVGMatrix Handles 2D Affine Transformations

The SVGMatrix interface provides an optimized mathematical model for representing and executing 2D affine transformations in web browsers. By encapsulating a 3×3 matrix using six controllable values (a through f), the interface allows the browser to compute translations, scaling, rotations, and skews across SVG elements and coordinate systems with high computational efficiency.

The Mathematical Model of SVGMatrix

A 2D affine transformation preserves collinearity and ratios of distances, meaning straight lines remain straight and parallel lines remain parallel after transformation. In the browser, this is mathematically represented by a 3×3 transformation matrix:

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

Because the third row is always constant ([0, 0, 1]) in 2D space, the SVGMatrix interface exposes only the six variable properties: a, b, c, d, e, and f.

When transforming an input coordinate \((x, y)\) into a new coordinate \((x', y')\), the browser computes the transformation using the following system of linear equations:

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

Matrix Properties and Their Functions

Each property in the SVGMatrix object directly maps to a specific geometric behavior:

• a (Scale X / Cosine): Controls horizontal scaling and affects rotation.
• b (Skew Y / Sine): Controls vertical shearing (skew) and affects rotation.
• c (Skew X / Negative Sine): Controls horizontal shearing (skew) and affects rotation.
• d (Scale Y / Cosine): Controls vertical scaling and affects rotation.
• e (Translate X): Specifies horizontal translation (shift along the X-axis).
• f (Translate Y): Specifies vertical translation (shift along the Y-axis).

Standard 2D Transformation Matrices

The identity matrix, which produces no visual change, initializes as [1, 0, 0, 1, 0, 0]. Specific transformations modify these values as follows:

• Translation by \((t_x, t_y)\): [1, 0, 0, 1, tx, ty]
• Scaling by \((s_x, s_y)\): [sx, 0, 0, sy, 0, 0]
• Rotation by angle \(\theta\): [cos(θ), sin(θ), -sin(θ), cos(θ), 0, 0]
• Skew along X-axis by \(\alpha\): [1, 0, tan(α), 1, 0, 0]
• Skew along Y-axis by \(\beta\): [1, tan(β), 0, 1, 0, 0]

Transformation Chaining and Coordinate Mapping

Browsers use matrix multiplication to chain multiple transformations into a single SVGMatrix instance. Combining operations like translation, rotation, and scaling into one compound matrix eliminates the overhead of recalculating intermediate points for every rendered vector path.

SVGMatrix also provides native methods such as multiply(), inverse(), translate(), scale(), and rotate(). The inverse() method enables the browser to map coordinates backward—converting screen-space mouse events directly back into an element’s local SVG coordinate system using the Current Transformation Matrix (getScreenCTM()).

While modern browser specifications have largely superseded SVGMatrix with the broader DOMMatrix interface, the underlying 2D affine mathematical implementation remains identical.