Inconsistent rendering of SVGs in fabric.Image objects

[kputh]

Version

2.0.0-beta7

Test Case

https://jsfiddle.net/nwkacqdb/

Steps to reproduce

Try to load an SVG file using fabric.Image.fromURL.

Expected Behavior

fabric.Image should render SVGs properly, and identically across all browsers.

Actual Behavior

The SVG is rendered in Safari 11. It does also render in Chrome 61, albeit at a different size. And it does not render in Firefox 56, lacking any error message in the JS console.

[kputh]

It would be helpful, if the documentation listed compatible image formats for fabric.Image.fromURL.

[blobinabottle]

You should load your svg with the correct method:
https://jsfiddle.net/nwkacqdb/8/

[kputh]

I don't want to embed an SVG, I want to reference it. In SVG it looks like this:
<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>

[asturur]

The issue has been described somewhere else here

the svg is lacking any kind of width and height.
Firefox will render it on the DOM, inspecting the container, but since there is no container when rendering offscren, he will just not render it.

I refreshed a bug in firefox asking for behave like the other browsers but they said is against the specs. https://bugzilla.mozilla.org/show_bug.cgi?id=700533#c28

#4324 this recent PR could work as a solution for you.

[asturur]

let me know if #4324 solved for you