svg scale

6.2 The `scale` Scale

The command transform="scale(x)" multiplies all x- and y-coordinates by the given value.
The command transform="scale(x, y)" multiplies all x-coordinates by the given x-value and all y-coordinates by the given y-value.

The scale affects also borders and starting point of a shape.

Example 1

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <g id="square1" >
      <rect x="10" y="10" width="20" height="20" style="stroke-width:1; fill:none; stroke:black;"/>
    </g>
    <use xlink:href="#square1" transform="scale(2)"/>
</svg>

Example 2

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <g id="square2" >
      <rect x="10" y="10" width="20" height="20" style="stroke-width:1; fill:none; stroke:black;"/>
    </g>
    <use xlink:href="#square2" transform="scale(2,3)"/>
</svg>

Example 3

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <rect x="5" y="5" width="5" height="10"
          style="stroke-width:1; fill:none; stroke:black;"/> 
        <rect x="5" y="5" width="5" height="10" transform="scale(3)"
          style="stroke-width:1; fill:none; stroke:red;"/>
      </svg>

Example 3

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <rect x="5" y="5" width="5" height="10"
          style="stroke-width:1; fill:none; stroke:black;"/> 
        <rect x="5" y="5" width="5" height="10" transform="scale(3)"
          style="stroke-width:1; fill:none; stroke:red;"/>
      </svg>

6.2 The scale Scale

6.2 The `scale` Scale