How to Use SVG transform Attribute  Complete Guide
The SVG transform attribute controls position, rotation, scaling, and skewing of any SVG element  learn every function with examples.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Transform Functions
The transform attribute accepts space-separated functions: `translate(x,y)`, `rotate(angle cx cy)`, `scale(x y)`, `skewX(angle)`, `skewY(angle)`, and `matrix(a b c d e f)`. They apply right-to-left.
- translate(50,100)  move element 50px right, 100px down
- rotate(45 cx cy)  rotate 45° around point cx,cy
- scale(2)  double the element size from origin
CSS transform vs SVG transform Attribute
Modern SVG supports CSS `transform` property with familiar syntax (`rotate(45deg)`). Use CSS transforms for animations; use the SVG attribute for static positioning in older tools.
- CSS transform supports deg, rad, turn units
- SVG attribute uses unitless degrees for rotate
- transform-box: fill-box centers transforms on the element
Frequently Asked Questions
How do I rotate an SVG shape around its center?
Use rotate(angle cx cy) where cx,cy is the shape's center point, or set transform-origin: center; with CSS transform.
Do SVG transforms affect child elements?
Yes  transforms on a <g> group element apply to all children. Nest groups to combine multiple transform contexts.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG