什么是SVG中使用的viewbox？

Question

我刚刚浏览了 THIS SVG文章。我遇到了以下解释视图框的示例：

<svg width="500" height="200" viewBox="0 0 50 20" >

    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>

</svg>

文章解释了上例中的视图框如下;

  

在这种情况下，视图框从0,0开始，宽50和高20。   这意味着，500 x 200像素元素内部使用a   坐标系从0,0到50,20。换句话说，每1个   单位在坐标中使用的坐标   对应于宽度为500/50 = 10像素，200/20 = 10像素   在高度。这就是为什么x位置为20和的矩形   10位的y位置实际位于200,100，其宽度（10）   和height（5）对应100像素和50像素。

现在我的问题是，当SVG已经具有宽度和高度时，为什么需要视图框？我是SVG的新手，我没有看到使用viewbox的充分理由。谁可以解释为什么viewbox被使用？