---- ★1 ----

  <svg width="160" height="160">
    <rect x="0" y="0" width="160" height="160" fill="skyblue"/>
    <rect x="40" y="40" width="80" height="80" fill="tomato"/>
  </svg>

---- ★2 ----

  <svg width="160" height="160" viewBox="0 0 320 320">
    <rect x="0" y="0" width="160" height="160" fill="skyblue"/>
    <rect x="40" y="40" width="80" height="80" fill="tomato"/>
  </svg>

SVGの描画領域とviewboxについて教えてください。
上記の★2が★1の右隣りに配置されて、
さらに大きさが★1の半分になる理由がわかりませんでした。

描画領域のwidth, heightとviewbox内パラメータwidth?, height?の関係性がいまいちわかりません。
感覚的には★2が320x320だから大きくなるのかなと思ったのですが、、
それぞれの定義もよくわかってなくて、、

すみませんが、お教えいただけないでしょうか。