This is an interactive demonstration of the SVG transformations.
SVG code in the textarea is displayed to the right or below.
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 takes 3 parameters- degrees of rotation (which can be negative), and the x and y coordinates of the center of rotation.
skewX skews the object along the horizontal axis.
Objects further away from the origin will skew more.
skewY skews the object along the vertical axis.
scale resizes the object. scale(1) has no effect.