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, 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 seconds.
Try It Free — Convert Image to SVG