0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>There are two coordinate systems in SVG:</p>
1
<p>There are two coordinate systems in SVG:</p>
2
<ol><li>The viewport coordinate system:<b>viewport space</b></li>
2
<ol><li>The viewport coordinate system:<b>viewport space</b></li>
3
<li>and the content coordinate system:<b>user space</b></li>
3
<li>and the content coordinate system:<b>user space</b></li>
4
</ol><p>Initially, the systems and their units correspond to each other:</p>
4
</ol><p>Initially, the systems and their units correspond to each other:</p>
5
<svg width="350" height="200"> … </svg><p>Currently, only the content coordinate system is visible (shown in red), because the systems are the same and one is hidden underneath the other.</p>
5
<svg width="350" height="200"> … </svg><p>Currently, only the content coordinate system is visible (shown in red), because the systems are the same and one is hidden underneath the other.</p>
6
<p>If you add a viewbox or transform, the content and its coordinate system will begin to shift and scale:</p>
6
<p>If you add a viewbox or transform, the content and its coordinate system will begin to shift and scale:</p>
7
<svg width="350" height="200" viewBox="0 0 237 300"> … </svg><p>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).</p>
7
<svg width="350" height="200" viewBox="0 0 237 300"> … </svg><p>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).</p>
8
<p>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.</p>
8
<p>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.</p>