Theory
Theory
Comments

Coordinate systems

There are two coordinate systems in SVG:

The viewport coordinate system: viewport space
and the content coordinate system: user space

Initially, the systems and their units correspond to each other:

<svg width="350" height="200">
  …
</svg>

Currently, only the content coordinate system is visible (shown in red), because the systems are the same and one is hidden underneath the other.

If you add a viewbox or transform, the content and its coordinate system will begin to shift and scale:

<svg width="350" height="200" viewBox="0 0 237 300">
  …
</svg>

Content coordinates are calculated starting from the top-left corner (at 0,0). Without the viewbox, this is the upper left corner of the viewport (turquoise point), but with the viewbox, this is the upper left edge of the viewbox (red point).

That is, now the location of the content will be measured relative to the new coordinate system and not from the viewport. Because of this, the figure will not appear to the left, but closer to the center, and the coordinate systems will no longer match.

object.svg
style.css

SVG

CSS

svg { border: 2px solid teal; }

Goalscompleted

The upper left corner of the shape is at the point 0 0. Add a viewBox with a value of 0 0 200 150, and watch how the shape position changes.
Swap the width and height values and see where the shape ends up this time.

Coordinate systems

Comments

Log in

Sign up

Restore access