# SVG Transforms

As with CSS and the canvas, SVGs also support transformations. In an SVG, these are specified by the `transform` attribute and thus apply to a specific element. For example, to rotate our ellipse from the previous section by 15 degrees around its center, we would use:

``````<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="cornflowerblue" transform="rotate(15 100 50)"/>
</svg>``````

Notice how the ellipse is clipped at the view box - this is another important role the view box plays.

Multiple transformations can be concatenated into the `transform` attribute, separated by spaces:

``````<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="goldenrod" transform="rotate(15 100 50) translate(100)"/>
</svg>``````

Note that the transformation functions are applied in the opposite order they are specified. In this case, translating the ellipse forward moves it along a rotated axis - 15 degrees downward!

## Transformation Functions

As with the other transformation approaches we’ve seen, SVG transforms are based on matrix math. And, as in those prior approaches, a variety of helpful functions are provided to create the most common kinds of transformation matrices. The specific transformation functions available in the SVG standard are:

Translate The `translate(tx [ty])` translates along the x-axis by `tx` and the y axis by `ty`. If no value for `ty` is supplied, the value of 0 is assumed.

Scale The `scale(sx [sy])` scales the image by `sx` along the x axis, and by `sy` along the y axis. If a value for `sy` is not supplied, then it uses the same value as `sx` (i.e. the element is scaled along both axes equally).

Rotate The `rotate(angle [x y])` rotates the element around the point (`x`, `y`) by `angle` degrees. If `x` and `y` are omitted, the origin (0,0) is the center of rotation.

Skew The `skewX(angle)` skews along the x axis by `angle` degrees. Likewise, the `skewY(angle)` skews along the y axis by `angle` degrees.

## Grouping Elements

The `<g>` element can be used to group elements together, and apply transformations to the whole group:

``````<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" height="200">
<g transform="translate(10 -20) rotate(45) skewX(20) scale(0.5)">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="cornflowerblue" />
<rect x="60" y="10" width="80" height="80" fill="goldenrod"/>
</g>
</svg>``````