Tutorial by Examples

Move a rectangle 10 units to the right and 20 units down: <svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" /> </svg> Move it 0 units horizontally and...

Scale a rectangle horizontally by factor 2 and vertically by factor 0.5: <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" /> </svg> The result is equiv...

Rotate a polygon clockwise by 90 degrees around the origin: <svg xmlns="http://www.w3.org/2000/svg"> <polygon points="0,0 30,0 15,20" transform="rotate(90)" /> </svg> The result is equivalent to <svg xmlns="http://www.w3.org/2000/svg...

skew a polygon horizontally by 45 degrees: <svg xmlns="http://www.w3.org/2000/svg"> <polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" /> </svg> The result is equivalent to <svg xmlns="http://www.w3.org/2000/svg"> ...

Apply a transformation matrix to a polygon: <svg xmlns="http://www.w3.org/2000/svg"> <polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" /> </svg> Every point (x,y) will be transformed by applying matrix(a, b, c, d, e...

Transformations can be concatenated and are applied right to left Rotate a rectangle by 90 degrees and then move it down by 20 units and to the right by 20 units: <svg xmlns="http://www.w3.org/2000/svg"> <rect x="-10" y="-20" width="20" height=...