Linked SVG Does Not Antialias in IE11

Question

I have an SVG of a client's logo that needs to have one color scheme for the header (blue on white) and its inverse in the footer (white on blue). To reduce load, I'm using a single inline <svg> element with <symbol>, referencing it in two places using <svg><use xlink:href="#logo"/></svg>, and then styling each version appropriately using CSS.

So far, so good. I only have to call the SVG once and can style it differently in both places without any issues.

However, after checking this setup in IE11, I saw that the linked SVG looks terrible. It doesn't appear to be antialiasing, but only on the linked version.

I've reduced the SVG to a simplified version for this example (and to anonymize the client), but you can see this behavior in a fiddle if you preview it in IE11.

Here is a screenshot of the behavior in IE11. The version on the left is the code I want, but you can see the quality degradation compared to the full SVG inline on the right.

Is there any reason why only IE11 (IE9 and IE10 render this correctly) does this? I tried putting shape-rendering="geometricPrecision" and shape-rendering="optimizeQuality" in both <svg> elements and in the <path> element and the quality doesn't change in IE11.

What am I missing here?

Answer 1

It appears to be working if you put the source at the top of the code.

Like so:

<svg style="display:none" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 90.44" xml:space="preserve" version="1.1">
<symbol id="logo">
    <defs>
        <clipPath clipPathUnits="userSpaceOnUse">
            <path d="m0 67.83 432 0L432 0 0 0 0 67.83Z" />
        </clipPath>
    </defs>
    <g transform="matrix(1.3333333,0,0,-1.3333333,0,90.436933)">
        <g clip-path="url(#clipPath16)">
            <g transform="translate(25.9522,0.5186)">
                <path d="m0 0c-11.91 4.19-25.95 13.63-25.95 27.69l0 28 2.56 1.2c14.27 6.65 32.15 10.42 47.85 10.42l4.44 0 0-39.62C28.9 13.63 14.86 4.19 2.95 0L1.47-0.52 0 0ZM-21.51 52.86C-10.12 58.17 7.13 62.87 24.46 62.87l0-35.18C24.46 16.11 12.05 7.91 1.47 4.19-9.1 7.91-21.51 16.11-21.51 27.69l0 25.17z" style="fill-rule:evenodd;" />
            </g>
            <g transform="translate(31.1309,54.8155)">
                <path d="M0 0C-0.02-0.01-0.05-0.02-0.07-0.03-0.05-0.02-0.02-0.01 0 0" class="s0" />
            </g>
            <g transform="translate(31.2388,54.8624)">
                <path d="M0 0C-0.04-0.01-0.07-0.03-0.11-0.05-0.07-0.03-0.04-0.01 0 0" class="s0" />
            </g>
            <g transform="translate(31.0625,54.7837)">
                <path d="M0 0C0 0 0 0-0.01 0 0 0 0 0 0 0" class="s0" />
            </g>
        </g>
    </g>
</symbol>
</svg>

<header>
<div>
    <a href="test.html"><svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg></a>
</div>
<div>
    <svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg>
</div>
</header>

<div class="clear"><!-- --></div>

<footer>
    <div>
    <a href="test.html"><svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg></a>
</div>
<div>
    <svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg>
</div>
</footer>