Avoiding rasterization with svg image so that transforms work in Firefox

Question

I want to apply a matrix transformation to an svg. Here's a fiddle. On Firefox, it looks like this:

It looks like it's rasterizing it to a 10x10 bitmap before transforming it because of my viewbox. How can I avoid this?

The way I see it, I can try to find a way to force Firefox not to rasterize, or use some form of embedding. (<embed>? <object>? iframe? I thought these were all bad practice for one reason or another.) I am loading these SVGs dynamically with JavaScript. How would I do that, then?

PS: If there's a way with svg.js, that's what I'm using right now, but I'm more than willing to go vanilla to just get this working.

EDIT: FWIW, apparently it's fixed in the nightly Firefox, but I'd still like a solution for now; I'm trying to roll out soon. (Also realized I haven't explicitly stated that it works in Chrome and IE)

Answer 1

A workaround is to make the "original size" larger and adjust the transform to scale down by the same ratio.

<svg viewbox="0 0 20 20">
    <image xlink:href="https://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig11/img/napoleon%20for%20svg%201.svg"
           width="100" height="100" transform="matrix(0.1, 0.02, 0.02, 0.1, 1, 2)" />
</svg>