Chapter 26: SVG Transformations
SVG Transformations are the way you move, rotate, scale, skew (slant), or mirror any SVG element (shapes, groups, text, paths, images, etc.) without changing their original coordinates. It’s like telling the browser: “Take this circle I already drew at (100,100)… now move it 50 pixels right, rotate it 45 degrees, make it twice as big, and slant it like italic text.”
Transformations are extremely important because they let you:
- Position elements easily
- Create animations (CSS or SMIL)
- Make reusable icons that can be resized/rotated
- Build complex scenes (wheels, clocks, arrows, 3D-like effects)
The magic happens with one attribute: transform
1. The transform Attribute – Main Ways to Use It
You can write transformations in two syntax styles (both correct, both widely used in 2026):
Style A – Modern / Recommended (CSS-like functions) Most new code and tutorials use this:
|
0 1 2 3 4 5 6 |
transform="translate(50 30) rotate(45) scale(2) skewX(20)" |
Style B – Old matrix way (still works, but harder to read):
|
0 1 2 3 4 5 6 |
transform="matrix(1.5 0.5 -0.5 1.5 50 30)" |
→ We will focus on Style A — it’s clearer and what almost everyone uses now.
2. The 5 Main Transformation Functions
| Function | What it does | Syntax examples | Typical use case |
|---|---|---|---|
| translate(x y) | Move horizontally (x) & vertically (y) | translate(100 50), translate(-30 0) | Positioning, sliding animations |
| rotate(angle cx cy) | Rotate around a point (degrees) | rotate(45), rotate(90 100 100) | Spinning icons, clock hands |
| scale(sx sy) | Resize (sx = x-scale, sy = y-scale) | scale(2), scale(1.5 0.8) | Zoom in/out, stretch icons |
| skewX(angle) | Slant horizontally (like italic) | skewX(30) | Fake 3D / perspective |
| skewY(angle) | Slant vertically | skewY(-20) | Fake 3D / perspective |
You can combine them — order matters! Transformations are applied from right to left (last one first).
3. Your First Transformations – Simple Examples (Copy-Paste These!)
Example 1 – Translate (Move)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg width="400" height="200" viewBox="0 0 400 200"> <!-- Original circle – no transform --> <circle cx="100" cy="100" r="40" fill="lightblue" stroke="blue"/> <!-- Moved 150 right & 30 down --> <circle cx="100" cy="100" r="40" fill="orange" stroke="red" transform="translate(150 30)"/> </svg> |
→ Same circle coordinates, but second one appears shifted
Example 2 – Rotate (Around Center)
|
0 1 2 3 4 5 6 7 |
<rect x="100" y="60" width="200" height="80" fill="purple" transform="rotate(45 200 100)"/> |
→ rotate(45 200 100) = rotate 45° around point (200,100) — the center of the rectangle
Without the cx cy → rotates around (0,0) top-left → looks wrong!
Example 3 – Scale (Bigger & Stretched)
|
0 1 2 3 4 5 6 7 8 9 10 |
<circle cx="100" cy="100" r="50" fill="lime" transform="scale(2)"/> <ellipse cx="300" cy="100" rx="80" ry="40" fill="pink" transform="scale(1.5 2.5)"/> |
→ First circle becomes twice as big → Second ellipse becomes stretched vertically
Example 4 – Skew (Slant / Fake 3D)
|
0 1 2 3 4 5 6 7 8 9 10 |
<rect x="50" y="50" width="200" height="100" fill="gold" transform="skewX(30)"/> <rect x="300" y="50" width="200" height="100" fill="silver" transform="skewY(-25)"/> |
→ First looks slanted right (like parallelogram) → Second slanted upward
Example 5 – Full Combination (Most Powerful)
|
0 1 2 3 4 5 6 7 8 9 |
<g transform="translate(200 150) rotate(30) scale(1.8) skewX(15)"> <rect x="-50" y="-30" width="100" height="60" fill="#ff6b6b"/> <text x="0" y="10" font-size="20" text-anchor="middle" fill="white">Hi!</text> </g> |
→ Group moves to center → rotates → scales up → slants
4. Important Rules & Teacher Tips 😄
- Order matters a lot! transform=”translate(100 0) scale(2)” ≠ transform=”scale(2) translate(100 0)” → First moves then doubles size → Second doubles first (so translate becomes 200 instead of 100)
- Rotate needs center point most of the time — otherwise rotates around (0,0) Use rotate(angle cx cy) or move shape to origin first
- Use <g> (group) when you want to transform many elements together
- CSS transform also works on SVG (modern way):
CSS0123456circle { transform: translate(50px, 30px) rotate(20deg); }
- Common mistake: Forget units in CSS version → use px or % In SVG transform attribute → no units needed (user units)
- Animation tip: Animate transform with CSS @keyframes → spinning wheels, bouncing icons, rotating loaders
Understood SVG Transformations now? This is one of the most powerful tools in SVG — almost every animated icon, interactive chart, or responsive logo uses them.
Tell me what you want next:
- Full animated rotation example (CSS or SMIL)?
- Transform on text or image element?
- 3D-like fake perspective with skew + scale?
- Combine transform + gradient + filter?
- Or complete reusable icon with hover scale + rotate?
Just say — we can build any transformation scene together right now! 🚀
