I am experimenting with using nested inline SVGs to creatively position smaller svg images within an svg container. However, I am finding it challenging to grasp the guidelines for sizing nested SVG elements.
svg {
display: block;
}
Here is my query - why does this code snippet correctly render a 200px by 200px red square:
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
But when I attempt to nest another svg element, the square resizes to 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>