以下のようなコードを書いたとき、上のコードの図形と比較して下のコードの図形が右側にずれますが、これはなぜでしょうか。

「viewBox="左上からのx座標　右上からのy座標、幅、高さ」と認識しているので、下のコードのように幅が10になると矩形が小さくなるのかと思ったのですが、右にずれました...！

初歩的な質問で申し訳ないですが、宜しくお願いします。

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

<svg width="320" height="320" viewBox="0 0 10 320" style="background: gray;">
    <rect x="0" y="0" width="160" height="160" fill="skyblue" />
    <rect x="40" y="40" width="80" height="80" fill="tomato" />
</svg>