SVG Coordinate Systems, Transforms & Matrix Math Glossary
A master engineering glossary of 30+ terms covering 2D affine transformation matrices, homogeneous coordinates, coordinate mapping, and SVG DOM calculation APIs.
The internal infinite coordinate grid in which SVG geometry points, paths, and primitives are defined. It starts at (0,0) at the top-left and extends indefinitely rightwards (+X) and downwards (+Y).
The physical CSS pixel grid determined by the SVG element's width and height in the host HTML document layout.
viewBox="minX minY width height"The 4-value mapping function that defines the specific rectangle in User Space to scale and display inside the HTML Viewport.
preserveAspectRatio="xMidYMid meet"Controls uniform aspect ratio scaling when the viewBox proportions differ from the viewport container. Options include meet (letterboxing), slice (cropping), and none (distortion).
The cumulative \(3 \times 3\) affine transformation matrix that maps an SVG element's local user coordinates directly into the viewport's screen space.
transform="translate(10, 20)"Shifts the coordinate space origin by \(t_x\) units horizontally and \(t_y\) units vertically without rotating or resizing.
transform="scale(1.5)"Multiplies all coordinate points by scaling factors \(s_x\) and \(s_y\). If \(s_y\) is omitted, it defaults to \(s_x\) (uniform scaling).
transform="rotate(45, 12, 12)"Rotates the user coordinate system by a given angle in degrees clockwise around the origin (0,0) or an optional explicit center point (cx, cy).
transform="skewX(15)"Distorts the coordinate system along the X or Y axis by a specified angle, transforming rectangles into parallelograms.
The anchor point about which scale, rotate, and skew transforms are calculated. In SVG 2 and modern CSS, defaults to center or 50% 50% when using CSS transforms.
matrix(...)The fundamental 6-parameter affine transformation matrix representing the \(3 \times 3\) homogeneous matrix: $$\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}$$ where \(a, d\) represent scaling, \(b, c\) represent skewing/rotation, and \(e, f\) represent translation.
A geometric mapping that preserves collinearity (all points lying on a line still lie on a line after transformation) and ratios of distances between points.
The representation of a 2D point \((x, y)\) as a 3D vector \([x, y, 1]^T\), allowing translations to be computed using standard matrix multiplication.
Transformations in SVG execute from right to left in post-multiplication order: transform="translate(10) rotate(45)" translates first, then rotates the translated grid.
The mathematical inverse \(M^{-1}\) of a transformation matrix \(M\). Used to unproject screen mouse clicks back into local SVG path coordinates.
element.getScreenCTM()Returns a DOMMatrix mapping local SVG element coordinate points directly to the browser window's physical client screen coordinates.
element.getCTM()Returns the transformation matrix mapping an element's coordinate space to the coordinate space of the nearest viewport ancestor.
element.getBBox()Computes the tightest bounding box rectangle (x, y, width, height) enclosing all rendered vector geometry in current user coordinates.
point.matrixTransform(matrix)Multiplies a DOMPoint by a DOMMatrix, converting points between coordinate frames in real-time interactive vector canvases.