This is an interactive demonstration of the SVG transformations.

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

The SVGs in this demo use a 600x600 viewbox.

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.

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.