Some inline SVGs not rendering in IE 11

[rob-johansen]

I'm in the process of upgrading a project from React 0.10.0 to 15.2.1. Strangely, some of our inline SVGs have stopped rendering in IE 11 after the upgrade. Here are before and after screenshots, as well as the SVG elements themselves.

In this example, the little red alert icon renders fine in IE 11 with the old React:

But it's missing with the new React:

With the old React, here's how the SVG element for this alert icon appears in the HTML:

<svg class="input-error-icon" height="19px" width="19px" viewBox="0 0 19 19">
    <defs>
        <path id="0bbd0228-d6c1-4512-9605-3d9b65764f92" d="M6.64416569,0.289011525 C6.82060206,-0.0872301213 7.12227501,-0.098498378 7.32083768,0.269150816 L14.9195766,14.3386147 C15.1168558,14.7038876 14.937946,14.9999998 14.5276777,14.9999998 L0.494636005,15 C0.0809170107,15 -0.110284206,14.6925343 0.0649978173,14.3187542 L6.64416569,0.289011525 Z"></path>
        <mask id="5867705e-d384-40b8-8cef-d12afb961468" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="19" height="19">
            <rect x="-2" y="-2" width="19" height="19" fill="white"></rect>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#0bbd0228-d6c1-4512-9605-3d9b65764f92" fill="black"></use>
        </mask>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-816.000000, -510.000000)">
            <g transform="translate(376.000000, 223.000000)">
                <g transform="translate(0.000000, 97.000000)">
                    <g transform="translate(11.000000, 110.000000)">
                        <g transform="translate(2.000000, 58.000000)">
                            <g transform="translate(276.000000, 10.000000)">
                                <g transform="translate(0.000000, 11.000000)">
                                    <g transform="translate(150.000000, 0.000000)">
                                        <g transform="translate(3.000000, 3.000000)">
                                            <use stroke="#ce0000" mask="url(#5867705e-d384-40b8-8cef-d12afb961468)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#0bbd0228-d6c1-4512-9605-3d9b65764f92"></use>
                                            <path d="M7,6 L7,10.0000001" stroke="#ce0000" stroke-width="2" stroke-linecap="round"></path>
                                            <circle fill="#ce0000" cx="7" cy="13" r="1"></circle>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

And here's how it appears in the HTML with the new React (it's got the <defs> element, but it's missing all the <g> elements):

<svg class="input-error-icon" height="19px" width="19px" viewBox="0 0 19 19">
    <defs>
        <path id="0bbd0228-d6c1-4512-9605-3d9b65764f92" d="M6.64416569,0.289011525 C6.82060206,-0.0872301213 7.12227501,-0.098498378 7.32083768,0.269150816 L14.9195766,14.3386147 C15.1168558,14.7038876 14.937946,14.9999998 14.5276777,14.9999998 L0.494636005,15 C0.0809170107,15 -0.110284206,14.6925343 0.0649978173,14.3187542 L6.64416569,0.289011525 Z"></path>
        <mask id="5867705e-d384-40b8-8cef-d12afb961468" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="19" height="19">
            <rect x="-2" y="-2" width="19" height="19" fill="white"></rect>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#0bbd0228-d6c1-4512-9605-3d9b65764f92" fill="black"></use>
        </mask>
    </defs>
</svg>

If you want to see these in action, put in a bogus email/password at both of the following URLs in IE 11:

Old React: https://b.socrative.com/login/teacher/

New React: https://rob.socrative.com/login/teacher/

Any ideas what could be causing this? (Note that the little "G" icon for the Google button is also an inline SVG, yet it renders fine with both versions of React.)

[rob-johansen]

As a workaround, I had our UX designer create a simpler, single-path SVG for the icon. The new version of React is rendering it without problems:

<svg class="input-error-icon" width="19px" height="18px" viewBox="0 0 19 18">
    <path fill="#ce0000" d="M18.7,14.3L11.1,1.2c-1-1.7-3.3-1.7-4.2,0.1L0.3,14.4C-0.6,16.1,0.6,18,2.5,18h14.1C18.5,18,19.6,16,18.7,14.3z M16.6,16H2.5c-0.4,0-0.6-0.3-0.4-0.7L8.6,2.3c0.2-0.4,0.5-0.4,0.7,0l7.6,13.1C17.1,15.7,17,16,16.6,16z M10,7.1V11c0,0.6-0.4,1-1,1 s-1-0.4-1-1V7.1c0-0.6,0.4-1,1-1S10,6.6,10,7.1z M10,13.9c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1 C9.5,12.9,10,13.3,10,13.9z"></path>
</svg>

I'd still like to know what's wrong with the original SVG, however, so we can avoid this problem in the future.

[zpao]

What does the SVG look like in React (ie in the render method)? It looks like you might be using dangerouslySetInnerHTML which should be unnecessary now (we should support all SVG now in v15).

[rob-johansen]

Indeed I was using dangerouslySetInnerHTML. I tried switching back to the original SVG, and without using dangerouslySetInnerHTML; however, I'm getting this error (I'm not using JSX):

Uncaught TypeError: React.DOM.use is not a function

And, sure enough, it looks like <use> is not one of the supported SVG elements: https://facebook.github.io/react/docs/tags-and-attributes.html#svg-elements

Still, it's surprising that dangerouslySetInnerHTML isn't working anymore with this particular SVG.

[zpao]

Oh yea, React.DOM.* hasn't been and probably won't be updated (#6169 might say more). You can add to it if you want (React.DOM.use = React.createFactory('use')).

Totally agree that it's surprising. I'm guessing it's related to the way we create DOM nodes now. We do some things "more correctly" now for SVG so it could be just that this never should have worked but happened to due to some irregularity.

[rob-johansen]

Thanks for your help. I prefer less complex SVGs anyway (for other reasons, like changing fill/stroke on hover with CSS), so I think I'll continue asking our UX designer to produce these single-path SVGs going forward.

[jp7837]

I encountered this as well, and it looks like the way we set the inner HTML in #6982 would cause only half of the children to be added. Specifically in da366c6, we change from a while loop to a for loop, which would not work since the original nodes get moved. How is this working in the unit test?

[zpao]

@jp7837 thanks for following up and seeing that. We'll fix it, but not sure what @stenrap was seeing is the same thing. Definitely possible, but not clear (too much change in the upgrade range to really confirm).