Can anyone explain why firefox crops this SVG image? - css

Question

Can anyone explain why firefox crops this SVG image?
It's within a container and being scaled to fit by CSS.
I'm using <symbol> and <use>.
.container {
width: 1em;
height: 1em;
}
svg {
width: 100%;
height: 100%;
}
<svg style="display:none">
<symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" />
</symbol>
</svg>
<div class="container">
<svg>
<use xlink:href="#icon_triangleup"></use>
</svg>
</div>

Answer 1

I can tell you why, as in, how to fix it. But not why Chrome seems to ignore what's causing the issue in Firefox.
Firefox is using the 24px width and height set on the <symbol> element, so remove those and the symbol will expand to fill the space of it's container.
You can always set the width and height on the <use> element if you want the individual instances of the symbol to be different sizes.
.container {
width: 1em;
height: 1em;
}
svg {
width: 100%;
height: 100%;
}
<svg style="display:none">
<symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" />
</symbol>
</svg>
<div class="container">
<svg>
<use xlink:href="#icon_triangleup"></use>
</svg>
</div>