# [HTML5] Graphics – SVG Transformations

In SVG, transformation is very versatile. You can transform any shapes or even texts using the “transform” attribute.

1. Translation

The “translate()” function moves the shape in x or y direction.

• translate(dx)
• translate(dx, dy)
```<circle cx="50" cy="50" r="50" fill="Red" />
<circle cx="50" cy="50" r="50" fill="Blue" transform="translate(100)" />
<circle cx="50" cy="50" r="50" fill="Green" transform="translate(0,100)" />
<circle cx="50" cy="50" r="50" fill="Yellow" transform="translate(100,100)" />
```

2. Rotation

The “rotate()” function rotates the shape. It has 3 parameters.

• angle : clockwise if positive, counter-clock if negative
• cx, cy : center of location
```<rect x="50" y="50" width="100" height="100" fill="Blue" />
<rect x="50" y="50" width="100" height="100" fill="Red" transform="rotate(45, 100, 100)" />
```

3. Scaling

The “scale()” function scales the shape.

• scale(sx)
• scale(sx, sy)
```<circle cx="50" cy="50" r="20" fill="Red" />
<circle cx="150" cy="50" r="20" fill="Blue" transform="scale(0.5,2)" />
<circle cx="50" cy="150" r="20" fill="Green" transform="scale(2,0.5)" />
<circle cx="150" cy="150" r="20" fill="Yellow" transform="scale(2,2)" />
```

4. Skewing

The “skewX()” and “skewY()” functions are used skew shapes.

• skewX(angle)
• skewY(angle)
```<rect x="50" y="50" width="100" height="100" fill="Blue" />
<rect x="50" y="50" width="100" height="100" fill="Red" transform="skewX(30)" />
<rect x="50" y="50" width="100" height="100" fill="Green" transform="skewY(30)" />
```

5. Matrix

The matrix is a general transformation.

•  matrix(a, b, c, d, e, f)