SVG transform editor
Translate, rotate (around any origin), scale, skew, flip and matrix-transform an SVG, with live preview and generated transform attribute, CSS and transformed SVG source.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Everything is computed locally; parameters update the matrix, the transform attribute and the preview instantly.
The custom matrix is applied to the shape before the other transforms; identity by default.
(no transform)(no transform)matrix(1, 0, 0, 1, 0, 0)<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80"><rect x="20" y="20" width="80" height="40" rx="8" fill="#4F46E5"/><text x="60" y="46" font-family="sans-serif" font-size="16" text-anchor="middle" fill="#FFFFFF">UniKit</text></svg>
What this tool does
- Add a touch of rotation, scale or skew to an icon or shape, see it live, and copy out a transform value you can paste straight into a file.
- Rotate around an arbitrary point (the shape centre rather than the top-left corner) by filling in the origin — the tool emits the correct matrix with the move-back included.
- Learn SVG transform order by inspection: for the same rotate plus scale combination the attribute form and the composed matrix are shown together, so you can see how the multiplications combine.
- Debug "why did the shape leave the canvas after adding a transform" by switching operations on one at a time against the built-in sample.
Example
Input
Translate X 20, Y 10, rotate 45°, origin (50, 50), scale X 1.5, everything else default
Output
transform attribute: translate(20 10) translate(50 50) rotate(45) scale(1.5 1) translate(-50 -50) CSS: translate(20px, 10px) translate(50px, 50px) rotate(45deg) scale(1.5, 1) translate(-50px, -50px) Matrix: matrix(1.06066, 1.06066, -0.707107, 0.707107, 52.32233, -28.388348)
Operations are listed outermost to innermost: translate first, then move to the origin, rotate and scale, then move the origin back. The two translates are the standard way to rotate around an arbitrary point.
Frequently asked questions
Why do two extra translates appear when rotating around a point?
SVG rotate and scale always happen about the coordinate origin. To rotate around (50, 50) you first move the origin there, apply the rotation and scale, then move it back, which is why translate(50 50) … translate(-50 -50) shows up. Once composed they collapse into a single translation term.
Where do the numbers in the matrix come from?
Each operation is written as a 3×2 affine matrix and they are multiplied in order, producing the six values a b c d e f, where x' = a·x + c·y + e and y' = b·x + d·y + f. Six decimals are kept, so floating point noise such as cos 90° = 6.12e-17 is flattened to 0.
How does the transform attribute differ from CSS transform?
Syntax: the attribute separates arguments with spaces and omits units (rotate(45)), while CSS uses commas and units (rotate(45deg)). CSS also has transform-origin as a separate property, whereas here the origin is baked into the operation sequence, so the two forms are not interchangeable.
Where does the custom matrix apply?
The custom matrix sits right against the shape, before every other operation (innermost). In other words the shape is transformed by it first, then skewed, scaled, rotated and translated. It defaults to the identity matrix, which means it has no effect.
How do I write the transform back into the SVG?
The "Transformed SVG" output already has the transform on the root tag and overwrites any existing transform attribute; when every operation is zero the attribute is removed. Copy that source and save it as a .svg.
Keywords：svgtransform变形旋转缩放斜切matrix矩阵旋转中心svg 编辑