视口坐标系如何在svg中工作？

Question

我试图理解坐标系在svg中的工作原理。

在下面的HTML中，如果我没有指定视口，我无法理解为什么图像会放大。

如果我没有指定任何值，似乎默认大小为viewport。它是什么？

<!-- what is the default dimension of a viewport? -->
<p> no viewport or view box. viewport seem to have a default size. anything outside is clipped</p>
<svg style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

<p> no viewport or view box. viewport seem to have a default size. anything outside is clipped</p>
<svg style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="1500" ry="1500"></ellipse>
</svg>

<p>viewport but no viewbox. Only what is in viewport is visible. Same as default viewport value case but we are specifying the dimensions of viewport here</p>
<svg width="50" height="50" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

<p>viewport but no viewbox. Only what is in viewport is visible.  Same as default viewport value case but we are specifying the dimensions of viewport here</p>
<svg width="50" height="50" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="1500" ry="1500"></ellipse>
</svg>
<!-- why this is large?-->
<p>viewbox but no viewport. Viewport takes same space as viewbox</p>
<svg viewBox="0 0 50 50" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>
<!-- why this is large?-->
<p>viewbox but no viewport. Viewport takes same space as viewbox</p>
<svg viewBox="20 20 100 100" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

<p>viewport and viewbox. Value of viewport determines what would be visible</p>
<svg width="10" height="10" viewBox="0 0 50 50" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>