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.
You can use the transform-origin property to specify the center of rotation as well.
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.
Scale can take 2 arguments- the first refers to the width of the element, and the second refers to the width.
Using negative arguments can flip the image.