SVG transformations

by Peter Collingridge
My sister's handmade cards on Etsy.
Drawing of a pile of animals

See the result of applying a transformation to SVG elements. Click on the currently implemented items to see examples.

SVG Element

Transformation

Output

Currently implemented

These are the elements and transformations that are currently implemented. Click on an example to add it to the input. Note that not all transformations can be applied to every element. For example, scaling a circle differently in two dimensions will not result in a circle so has not been implemented. At present, only one transformation can be applied at a time. You can apply it to multiple SVG elements as long as they are not nested (so no <g> elements). Scaling an element will not effect its stroke width.

Elements

  • Rect
  • Circle
  • Ellipse
  • Line
  • Polyline
  • Polygon
  • Multiple elements

Path sections

  • M/m, L/l, Z/z
  • H/h, V/v
  • Q/q, T/t
  • C/c, S/s
  • A/a

Transformations

  • 1D Translation
  • 2D Translation
  • 1D Scale
  • 2D Scale
  • Rotation
  • Skew X
  • Skew Y

Matrix transformations

  • Translation matrix
  • Scaling matrix
  • Translate and scale matrix
  • Rotation matrix
  • Skew X matrix
  • Skew Y matrix
  • General matrix