Merging SVG transforms means mathematically combining multiple transform functions (like translate, rotate, scale, skewX, skewY, matrix) into a single equivalent transform. Since SVG applies transforms from left to right, the merged result is the product of all individual transformation matrices in reverse order. This is useful for optimizing SVG code, understanding complex transform chains, or preparing transforms for animation frameworks.

Transform order is critical because matrix multiplication is not commutative. For example, translate(100,0) rotate(45) first moves an element 100 units right, then rotates it around the origin — the element ends up in a different position than rotate(45) translate(100,0), which rotates first (changing the coordinate system's orientation) and then translates along the rotated axes. Use the up/down arrows to reorder transforms and see how the result changes in real-time.

Use the matrix(a,b,c,d,e,f) form when you need exact precision and compatibility — it represents the raw mathematical result of merging. Use the simplified form (e.g., translate(150,80) rotate(45) scale(1.5)) when you want human-readable code that's easier to edit and debug. Note that simplified decomposition may not always be exact, especially when skew transforms are involved. For production SVG, the matrix form is always safe and accurate.

The tool extracts translate(tx, ty) directly from the e and f values of the matrix. Then it decomposes the 2×2 sub-matrix [[a,c],[b,d]] by extracting: scaleX = sqrt(a² + b²), rotation angle = atan2(b, a), and then derives scaleY from the remaining components. If skew is detected (non-orthogonal axes), the simplified output falls back to the precise matrix form. The decomposition follows the algorithm outlined in the CSS Transforms specification.

Absolutely. The merged matrix(a,b,c,d,e,f) output can be used directly as the transform attribute value on any SVG element. For example: <rect transform="matrix(0.707,0.707,-0.707,0.707,100,50)" ... />. This single matrix replaces an entire chain of transforms, reducing code complexity and potentially improving rendering performance in complex SVG documents.

SVG transforms and CSS transforms use the same underlying mathematics (2D affine transformation matrices), but there are key differences: SVG transforms use the transform attribute with functions like translate(), rotate(), scale(), while CSS uses the transform property. SVG transforms are applied relative to the element's coordinate system origin (top-left), whereas CSS transforms default to the element's center (transform-origin: center). The matrix values are compatible — you can use this tool's output in both contexts.