<code><svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
<svg width="50px" height="80px"
style="outline: 1px solid green"
>
<circle cx="25" cy="25" r="10" style="stroke: black; fill: none;"/>
</svg>
</svg></code>
<code><svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
<svg width="50px" height="80px"
style="outline: 1px solid green"
>
<circle cx="25" cy="25" r="10" style="stroke: black; fill: none;"/>
</svg>
</svg></code>
<svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
<svg width="50px" height="80px"
style="outline: 1px solid green"
>
<circle cx="25" cy="25" r="10" style="stroke: black; fill: none;"/>
</svg>
</svg>If you see in chrome browser the outline for inner SVG only encapsulates the circle which is being drawn, you can also try to change the radius of the circle.
I was expecting svg outline to show the box of width 50px by 80px as defined by the width and height attribute.
am I missing something in nested SVG behavior ?