This is an interactive demonstration of the SVG transformations.

SVG code in the textarea is displayed to the right or below.

Translate

translate takes two parameters- x and y which shift the object n points in the expected directions.

You can use negative parameters as well.

Rotate

rotate takes 3 parameters- degrees of rotation (which can be negative), and the x and y coordinates of the center of rotation.

You can use the transform-origin property to specify the center of rotation as well.

SkewX

skewX skews the object along the horizontal axis.

Objects further away from the origin will skew more.

SkewY

skewY skews the object along the vertical axis.

Objects further away from the origin will skew more.

Scale

scale resizes the object. scale(1) has no effect.