Nesting SVGs causes unexpected resizing - html

Question

I am trying to use nested inline SVGs in order to flexibly arrange smaller svg images within an svg container. However, I am struggling to understand the rules of how nested SVGs are sized.
svg {
display: block;
}
Why does this correctly display a 200px by 200px red square:
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
But why does wrapping in another svg element cause the square to become 150px by 150px?
for example:
<svg>
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>
or:
<svg width="200px">
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>
or:
<svg width="200px">
<svg viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>

Answer 1

You can change the width and the height of each successive <rect> but be sure to maintain the same width and viewbox of each nested parent <svg> every time.
Working Example:
<svg width="200px" viewBox="0 0 200 200">
<rect width="200" height="200" fill="red" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="100" height="100" fill="yellow" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="50" height="50" fill="red" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="25" height="25" fill="yellow" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="12.5" height="12.5" fill="red" />
</svg>
</svg>
</svg>
</svg>
</svg>