SVG Scaling and viewBox-CodePudding

Here is a simple SVG file:

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" version="1.1" viewBox="0 0 377.95 377.95">
  <rect x="0" width="189" height="189" stroke="black" stroke-width="6" fill="red"/>
</svg>

This renders a 100mm x 100mm box with the top left corner at the origin as expected.

If I change the viewbox to:

 viewBox="0 0 177.95 177.95"

then the box is scaled up, still with the top left corner at the origin, as expected.

However, if I change only the width of the view box like so:

  viewBox="0 0 177.95 377.95"

then then box is not scaled but is moved along the X axis.

I thought only the first two parameters of the viewbox affected the translation? Also why isn't the box stretched in the X direction?

Does the viewbox scaling only work correctly if the scaling is the same in both X and Y directions?

Thanks!

CodePudding user response：

How the viewport is scaled in actual dimensions (embed frame) of the SVG is governed by preserveAspectRatio attribute.

See MDN entry and/or refer too Understanding SVG Coordinate Systems and Transformations by Sara Soueidan.