Transformation - Basics of Coordinate System Transformation

SVG uses a coordinate system to position elements on a page that you can transform the elements by rotating, skewing or scaling.

SVG transformations can be defined by the <transform> element.

Transformations in SVG alter coordinate systems, not objects. All objects defined within the scope of a transformation will be drawn in the transformed coordinate system.

Transformations specify how to map the transformed (new) coordinate system to the untransformed (old) coordinate system. All coordinates used within the scope the transformation are specified in the transformed coordinate system.

Transformations can be used to alter the appearance of elements in several ways:

• translate(x,y): This transformation moves the user coordinate system by the amounts specified.
• scale(x, y): This transformation changes the size of the element. The amount of scaling in the x and y directions can be controlled separately, but if only one value is specified, it will be used for both.
• rotate(n): This transformation rotates the element by the specified number of degrees.
• skewX(n)/ skewY(n) : These transformations skew the element by the specified number of pixels, with respect to the appropriate axis.
• It is also possible to define a matrix that performs a composite set of transformations.

Transformations are cumulative, and may be specified either as part of a single transform attribute or as part of nested elements. Transformations can be nested to any level.

The transform attribute applied to a <g> element defines a transformation to be applied to all the
coordinates in the group. For example:

<g transform="translate(x,y)"> <circle cx="coordinate" cy="coordinate" r="length" /> <rect x="coordinate" y="coordinate" width="length" height="length" />     < ! -- more graphics elements go here -- > </g>