How an SVG matrix maps coordinates
SVG represents a 2D affine transform with six values: matrix(a b c d e f). It maps a point to x′ = a·x + c·y + e and y′ = b·x + d·y + f. The visual 3×3 form on this page makes the translation column and the two transformed basis vectors easier to see.
The parser follows the transform functions and matrix representation defined by the SVG 2 coordinate-system specification. It accepts transform attribute syntax, not CSS declarations or 3D functions.
Why transform order changes the result
Matrix multiplication is not commutative. For example, translate(10 0) scale(2) maps X=1 to 12, while scale(2) translate(10 0) maps it to 22. The list builds the combined matrix from left to right; when that matrix acts on a point column, the rightmost coordinate operation takes effect first.
Use the cumulative table and “Reverse order” button to diagnose unexpected rotations around the origin, translations that appear scaled, or skew introduced in a nested group.
Bounds, inverse, and decomposition limits
The transformed rectangle remains a four-corner polygon. Its displayed bounds are an axis-aligned box around those transformed corners, which is often larger than the shape after rotation. An inverse exists only when the determinant is nonzero; zero scaling collapses geometry and cannot be undone.
The decomposition is a readable equivalent summary of the combined matrix, not a reconstruction of the original function list. Many different lists produce the same matrix, and reflected or degenerate transforms do not have one unique human-friendly decomposition.
Frequently asked questions
Can I paste an entire SVG file?
No. Paste only the transform attribute value. For full-file path, shape, group, bounds, and viewBox inspection, use ToolQuill’s SVG Path & ViewBox Inspector.
Are CSS and SVG transform syntax identical?
They overlap, and the six-value matrix has the same coefficient layout, but parsing rules, units, transform origins, and how properties interact can differ. This tool deliberately evaluates SVG transform attribute syntax.
Why is the inverse unavailable?
The matrix determinant is zero or effectively zero, usually because one scale dimension is zero or the transformation collapses a plane into a line. Such a mapping loses coordinate information.