SVG Coordinate System Transforms
SVG's transform attribute lets you translate, rotate, scale, and skew elements — and nested transforms compose in a specific, learnable order.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Core Transform Functions
`translate(x, y)` shifts position, `rotate(angle, cx, cy)` rotates around an optional pivot point, `scale(sx, sy)` resizes, and `skewX/skewY(angle)` shears the element — multiple transforms combine in a single `transform` attribute by listing them space-separated, applied right-to-left in terms of their effect on the coordinate space.
- translate, rotate, scale, and skewX/skewY are the core transform functions
- rotate accepts an optional pivot point (cx, cy) for off-center rotation
- Multiple transforms in one attribute apply in a specific compositional order
Nested Element Transform Composition
When a parent element has a transform and a child element also has its own transform, the child's transform applies within the parent's already-transformed coordinate space — this compositional nesting is powerful for building complex hierarchical animations (like a clock's hands) but can be confusing without a clear mental model.
- Child transforms compose within their parent's already-transformed space
- This nesting enables complex hierarchical animation (clock hands, robotic arms)
- Build a clear mental model of the compositional order to avoid confusion
Frequently Asked Questions
Why does my child element rotate around an unexpected point?
The rotation pivot defaults to the coordinate system's origin (0,0) unless you specify cx, cy in the rotate() function — for rotation around an element's own center, calculate and supply that center point explicitly.
What's the difference between the transform attribute and CSS transform?
Both ultimately achieve similar results, but CSS transform (in a stylesheet) benefits from cascade, media queries, and animation/transition support, while the transform attribute is a direct, presentation-level SVG attribute — CSS is generally preferred in modern workflows.
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