viewBoxにおけるwidthとheightの考え方について教えて下さい

順を追って説明していきます。
2020年7月12日
ユーザー

---- ★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だから大きくなるのかなと思ったのですが、、
それぞれの定義もよくわかってなくて、、

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

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(2)