IE11: SVG embedded images are not processed

[TheDutchCoder]

Version

2.3.3

Reproduction link

https://jsfiddle.net/TheDutchCoder/z11fe07p/1964/

Steps to reproduce

Use v-html to output a valid SVG image string. IE11 will not handle this at all (the node will not appear)

What is expected?

The image node to appear in the DOM

What is actually happening?

No node appears in the DOM

---

In more complex cases, IE will issue the following errors:
[Vue warn]: Error in nextTick: "Error: Error parsing XML string"
XML5660: The specified prefix has not been declared. Line: 1, Column 249

Which seems to point at a missing xmlns:xlink="http://www.w3.org/1999/xlink", but even when that's added it has no effect.

[posva]

For some reason, the innerHTML property doesn't exist (adding it does nothing either) in IE 11 in the g element, therefore v-html cannot do anything. I'm not sure we can do something for it, but I'll give it a deeper look

[TheDutchCoder]

I'm not sure if that's the issue though, because all other stuff renders fine (other SVG Nodes for example), but you're probably in a better position to judge that ;)

I have an app that renders different SVG layers based on SVG strings and everything works fine, it really is just the <image> element that doesn't in IE11 (other SVG data works fine in IE11).

Hope that helps a bit.

[posva]

Maybe it works for other things that are not g but at the moment v-html won't work on elements missing the innerHTML... I have no idea why IE 11 does that thought

[TheDutchCoder]

Maybe it's your wording, but the g element does properly support innerHTML, I use it all the time. Hope you can figure it out though ;)

…

On May 25, 2017 5:40 PM, "Eduardo San Martin Morote" < ***@***.***> wrote: Maybe it works for other things that are not g but at the moment v-html won't work on elements missing the innerHTML... I have no idea why IE 11 does that thought — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5756 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABl0b1BV2j_1-q3B49KNqhgTkRlEv-O9ks5r9fU1gaJpZM4NmlgJ> .

[yyx990803]

https://jsfiddle.net/z11fe07p/1974/ <- this doesn't work in IE11 without Vue involved.

[TheDutchCoder]

Hmm indeed, it seems my polyfill takes over and helps the v-html directive out to render the contents. I'll open an issue at their repo, as it seems the polyfill doesn't handle images properly then.

Thanks guys!

[ericcirone]

I'm running into this same issue. @TheDutchCoder did you ever get a workaround?

[Justineo]

You should include svg-innerhtml to make v-html work with SVGs.

[ericcirone]

@Justineo That worked! Thanks.