svg: outermost svg tag and other container elements

<style>

svg {width:200px;height:100px;border:1px solid black;}

use {}
use.ic1 {fill:red;stroke:purple;}
use.ic2 {fill:green;stroke:cadetblue;}
use.ic3 {fill:blue;stroke:maroon;}
use.ic4 {fill:cyan;stroke:purple;}
use.ic5 {fill:magenta;stroke:cadetblue;}
use.ic6 {fill:yellow;stroke:maroon;}
svg path {fill:inherit;stroke:inherit;}
</style>

<svg style="display:none;">
<symbol id="symbol1">
<path d="M10,10 L100,10 L100,100 L10,100z"/>
</symbol>
</svg>

<svg viewBox="0 0 200 100">
<use class="ic1" href="#symbol1"/>
</svg>

<svg viewBox="0 0 200 100">
<use class="ic2" href="#symbol1"/>
</svg>

<svg viewBox="0 0 200 100">
<use class="ic3" href="#symbol1"/>
</svg>


<svg viewBox="0 0 200 100">
<use class="ic4" href="#symbol1"/>
</svg>

<svg viewBox="0 0 200 100">
<use class="ic5" href="#symbol1"/>
</svg>

<svg viewBox="0 0 200 100">
<use class="ic6" href="#symbol1"/>
</svg>