scale

The scale transform scales the SVG element by the specified x and y coordinates. The unit is a factor, so passing in two would double the size of the element.

As with translate, the y coordinate is optional and is assumed to be equivalent to the x argument if it's not provided.

If you've done CSS transforms and scaled an element, you might be surprised by the way scale works. Even if you haven't done CSS you might be surprised.

Scaling in SVG is from the origin point of the coordinate system. See the following example, showing three separate boxes. One is not scaled at all. The next two rectangles are scaled by 1.25 on both axes and then by 2 on the x axis and then not scaled on the y axis:

<svg xmlns="http://www.w3.org/2000/svg" width="500" ...

Get Mastering SVG now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.