Transformations can be applied to elements and group

Some examples:

<g transform="translate(5, 5)" ... > 
<g transform="translate(10)" is same as "translate(10,0)" >
<g transform="scale(2, 3)" ... > 
<g transform="scale(2)" is same as scale(2,2) > 
<g transform="rotate(45)" also rotate(45,30,50) rotates about (30,50) > 
<g transform="skewX(45)" ... > 
<g transform="skewY(45)" ... > 
<g transform="matrix(1 0 0 1 0 0)" ... > 
<g transform="translate(-10 -10) rotate(30) translate(10 10)" ... >
Transformation Meaning Parameters
translate Defines a translation of the coordinates x and y defining the x and y translation
scale Defines a scaling of the X and Y coordinates sx and sy defining the scaling in the X and Y directions s defining the same scaling in the X and Y directions
rotate Defines a rotation about a point angle, x and y defining a clock-wise rotation of angle degrees about the point (x,y) angle defining a clock-wise rotation of angle degrees about the origin
skewX Defines a skew along the X axis angle degrees defining a skew of the X position by Y*tan(angle)
skewY Defines a skew along the Y axis angle degrees defining a skew of the Y position by X*tan(angle)

For multiple transformations, the applied order is right to left. Some examples:

<svg viewBox="0 0 300 200"> /> <g transform="translate(200,195)"> /> /> <g transform="translate(-300,-200)"> <g transform="scale(1.5,0.5"> /> <g transform="translate(500,-100)"> <g transform="rotate(30)"> /> <g transform="translate(200,-250)"> <g transform="skewX(50)"> <g transform="scale(0.5)"> /> <g transform="translate(500,-250)"> <g transform="skewY(30)"> <g transform="scale(0.5)"> Order is important square: transform="rotate(20) scale(2.0,1.0)" square: transform="scale(2.0,1.0) rotate(20)" xn yn 1 a c e b d f 0 0 1 xold yold 1 transform="matrix(a,b,c,d,e,f)" /> <g transform="matrix(.9 .3 .3 .8 -280 40)"> <g transform="scale(0.5)">