What are transformation functions?

SVG supports 5 transformation functions: translate(), rotate(), scale(), skew(), and matrix().

1. matrix(a, b, c, d, e, f) - Transform the object coordinates by applying a 2-d matrix with the first 4 parameters and followed by a 2-d translation with the last 2 parameter:

x' = a*x + b*y + e  
y' = b*y + d*y + f 

2. rotate(d, cx, cy) - Transform the object coordinates by rotating them around (cx,cy) for d degree clockwise:

x' = (x-cx)*cos(d*PI/180) - (y-cy)*sin(d*PI/180) + cx
y' = (x-cx)*sin(d*PI/180) + (y-cy)*cos(d*PI/180) + cy

3. scale(sx, sy) - Transform the object coordinates by scaling x with sx and y with sy:

x' = sx*x 
y' = sy*y

4. skewX(d) - Transform the object coordinates by pushing the y-axis d degree:

x' = x + y*tan(d*PI/180)
y' = y 

5. skewY(d) - Transform the object coordinates by pushing the x-axis d degree:

x' = x
y' = x*tan(d*PI/180) + y 

6. translate(dx, dy) - Transform the object coordinates by moving the origin to the given location:

x' = x + dx 
y' = y + dy

⇒ SVG (Scalable Vector Graphics)

⇐ Transform Group of Objects Using "g"

⇑ Transformation of Object Coordinates

⇑⇑ SVG (Scalable Vector Graphics)