Application of Linear Algebra: SVG Transformations

Demonstrating how a Matrix Transformation manipulates vector graphics.

(0, 0) (100, 0) (0, 100) (100, 100) SVG OBJECT

Transformation Matrix

1 0 0 0 1 0 0 0 1
(Scale X / Cos)
(Skew Y / Sin)
(Skew X / -Sin)
(Scale Y / Cos)
(Trans X)
(Trans Y)

Presets

<g transform="matrix(1, 0, 0, 1, 0, 0)">

Square Corner Coordinates

Top-Left: (0, 0) Top-Right: (100, 0) Bottom-Left: (0, 100) Bottom-Right: (100, 100)