为什么这些HTML SVG形状之间存在巨大差距？

Question

这些形状都可以正常显示，但由于某种原因，前两个形状与其余形状之间存在大约10,000px的巨大垂直间隙。当我打开页面时，我必须向下滚动很多空白区域以查看其余的形状。我无法弄清楚导致这种情况的原因。

<svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

<svg width="2000" height="2000">
       <circle cx="80" cy="80" r="50" fill="green" />
    </svg>

<svg width="2000" height="2000">
       <rect cx="80" cy="80" r="50" fill="blue" />
    </svg>
<!-- THERE IS A WEIRD GAP HERE -->
<!-- SVG Rounded Rectangle
    Example -->
<svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
      style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
<!-- SVG Star
    Example -->
<svg width="300" height="200">
      <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
<!-- SVG Logo
    Example -->
<svg height="130" width="500">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
      Sorry, your browser does not support inline SVG.
    </svg>