Linked SVG not smoothing in IE11

Question

I have an SVG client logo that should have one color scheme for the header (blue on white) and its inverse in the footer (white on blue). To reduce the load, I use one built-in <svg> element with <symbol> , referencing it in two places with <svg><use xlink:href="#logo"/></svg> , and then style accordingly each version using CSS.

So far so good. I only need to call SVG once and stylize it differently in both places without any problems.

However, after checking this setting in IE11, I saw that the associated SVG looks awful. This does not look like anti-aliasing, but only the related version.

I reduced SVG to a simplified version for this example (and anonymize the client), but you can see this behavior in the script if you view 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 built-in on the right.

Is there a reason why only IE11 (IE9 and IE10 do it right) does it? I tried putting shape-rendering="geometricPrecision" and shape-rendering="optimizeQuality" in both the <svg> elements and the <path> element, and the quality does not change in IE11.

What am I missing here?

Answer 1

It seems to work if you put the source at the beginning of the code.

Same:

 <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>