Home » SVG Scale Transformation

SVG Scale Transformation

by Online Tutorials Library

The scale Transformation

In the scaling transformation, you can make an object larger or smaller than the size at which it was defined by scaling the coordinate system.

Uniformly scaling a graphic

The uniform scaling transformation is used to uniformly double the scale of both axes.

Example

Test it Now

Explanation:

In the above example, the grid hasn’t moved. The (x, y) point is still in the same place but each user coordinate is now twice as large as it used to be. Stroke-width is still one user unit and that unit has now become twice as large. That’s why the outline of the larger square is thicker.

Non-uniform scaling of a graphic

In the non-uniform scaling of a graphic, you can specify a different scale factor for the x-axis and y-axis of the coordinate system.

Example

Test it Now

You may also like