SVG issue rendering simple rectangles

General JUCE discussion
1

HI, I have an SVG that renders a simple keyboard graphic in SVG. But it seems Juce can’t render it, the Chrome version in on the left the Juce one is on the right. (it’s supposed to have a transparent background, but Chrome of course uses white for background, and these are screenshots.) It was exported from Affinity Designer, anybody know what’s wrong?
Thanks,
Dave.
oringinalKeys juceKeys

Here is the SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 224 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-590,-58)">
        <g id="Keyboard" transform="matrix(0.630986,0,0,1.01449,213.932,10.3188)">
            <rect x="596" y="47" width="355" height="138" style="fill:none;"/>
            <clipPath id="_clip1">
                <rect x="596" y="47" width="355" height="138"/>
            </clipPath>
            <g clip-path="url(#_clip1)">
                <g transform="matrix(1.78292,0,0,0.985714,-507.828,-20.0286)">
                    <rect x="633.333" y="67" width="21.333" height="96" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.78292,0,0,0.985714,-444.435,-19.0429)">
                    <rect x="633.333" y="67" width="21.333" height="96" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.78292,0,0,0.985714,-355.685,-19.0429)">
                    <rect x="633.333" y="67" width="21.333" height="96" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.78292,0,0,0.985714,-298.632,-19.0429)">
                    <rect x="633.333" y="67" width="21.333" height="96" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.78292,0,0,0.985714,-241.578,-19.0429)">
                    <rect x="633.333" y="67" width="21.333" height="96" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-375.496,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-324.781,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-274.067,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-223.353,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-172.638,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-121.924,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-71.2098,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
                <g transform="matrix(1.58482,0,0,3.28571,-426.21,-488.571)">
                    <rect x="644" y="163" width="2" height="42" style="fill:rgb(11,38,46);"/>
                </g>
            </g>
        </g>
    </g>
</svg>