SVG cannot be rendered on IE 11

[damy90]

Issue Details

• Version used: 1.0.0

• Describe whats happening: SVG images cannot be rendered on IE 11. PNG ang JPEG images are rendered.

• OS & Browser version: Windows 10, IE 11.285.17133.0

• Example: https://liveweave.com/RHMnHW
  On IE only the bitmap image is shown.

[lannymcnie]

Is this an EaselJS issue, or a problem with IE11 and drawImage with SVGs?

I made this sample that just draws the SVG directly into the canvas without EaselJS, and it looks like it doesn't work.
https://liveweave.com/xfYKzr

I am going to close this. Feel free to reopen if the issue is shown to be EaselJS-specific.
Cheers!

[damy90]

The sample using canvas directly works on IE on my machine. The createjs still doesn't.
My IE is now version 11.407.17134.0

[lannymcnie]

Thanks, I can do some more testing.

[lannymcnie]

I think I solved this. It is an issue with EaselJS, but I am not sure what we can do.

To summarize

• EaselJS's containers (ie, the Stage) will only draw children that are visible
• Bitmaps use a few checks to see if images/bitmaps are visible. If it has a cache, a width, a context, or a valid readyState, then it will draw
• SVGs in IE11 get none of these. They receive a width/height upon being added to the DOM

This is why they will work with raw canvas, but not in EaselJS. We can determine when an image is loaded, but since EaselJS thinks it has no content, it will not try to draw it.

We will look at adding a workaround. Maybe just checking that the source is an SVG path is enough. You can probably patch EaselJS yourself fairly easily. Just check out the isVisible function in Bitmap.js (or modify the function in the compiled lib).

Note that when using raw canvas, even if the image is "loaded" it might still not render right away, which is why it appeared that the raw canvas approach didn't work in IE. If you set it to delay a little, or constantly redraw, the SVG showed up consistently. Typical race condition.
https://jsfiddle.net/lannymcnie/481entqb/2/

Definitely an interesting edge case.