Evitare la rasterizzazione con immagine svg in modo che le trasformazioni funzionino in Firefox

Question

Desidero applicare uno matrixtransform a svg. Here's a fiddle. Su Firefox, sembra che questo:

Sembra come se fosse rasterizzazione a una bitmap 10x10 prima di trasformarla a causa della mia viewBox. Come posso evitare questo?

Il modo in cui lo vedo, posso provare a trovare un modo per forzare Firefox a non rasterizzare o utilizzare qualche forma di incorporamento. (<embed>? <object>? iframe? Ho pensato che fossero tutte pratiche sbagliate per un motivo o per un altro.) Sto caricando questi SVG in modo dinamico con JavaScript. Come potrei farlo, allora?

PS: Se c'è un modo con svg.js, questo è quello che sto usando in questo momento, ma sono più che disposto ad andare vaniglia per farlo funzionare.

EDIT: FWIW, a quanto pare è stato risolto nella notte di Firefox, ma mi piacerebbe ancora una soluzione per ora; Sto cercando di uscire presto. (Inoltre ho realizzato che non ho dichiarato esplicitamente che funziona in Chrome e IE)

Answer 1

Una soluzione alternativa è di ingrandire la "dimensione originale" e regolare la trasformazione in scala ridotta dello stesso rapporto.

<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>