¿Por qué este SVG anidado no funciona en Firefox?

Estoy creando una hoja de contacto que muestra todos los iconos en una biblioteca. Lo he construido usando SVGs anidados. Aquí tienes una versión mínima:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewbox="0 0 200 200">
    <svg id="sheet_core" width="200" height="200" x="0" y="0">
        <svg width="200" height="200" x="0" y="0">
            <symbol id="piece" viewbox="-2.5 -2.5 105 105">
                <circle r="50" cx="50" cy="50" data-playerfill="true" fill="#ffffff" stroke-width="5" stroke="#000000"></circle>
            </symbol>
            <use href="#piece" x="25" y="25" transform="matrix(0.75,0,0,0.75,6.25,6.25)"></use>
            <text x="0" y="192.1015625" svgjs:data="{" leading":"1.3"}"="">piece</text>
        </svg>
    </svg>
</svg>

Esto funciona bien en Chrome y Opera, pero no funciona en Firefox.

Deberías ver esto: https://ibb.co/VT8SSSd.

Pero en Firefox, obtengo esto: https://ibb.co/5L7PP22.

Si inspecciono el código, los elementos <symbol> están grisados, lo que sugiere que no están siendo referenciados, cuando claramente lo están después. También intenté mover todos los símbolos dentro de un <defs> global, pero eso tampoco funcionó. ¿Alguna idea de cómo modificar esto para que funcione en Firefox también?

Estas diferencias entre navegadores con SVG son desesperantes, tengo que decirlo.