How to display external svg spritemap with IE11

Hi @all,

currently I'm creating several svg spritemap files. In Chrome, Firefox and Edge everything is fine. All SVGs are displayed correctly. Every scale is working fine.

However, in IE11 nothing is shown. Copying the svg file content directly into my html page will work, but this is a way that I can only use during testing. Later on the real html code is generated on the fly with external css and svgs.

So, is there any trick, to bring IE11 to show the content of the external svg spritemap? Does the spritemap have  to have a special format that my xml is missing?

Here are some exerpts from my testing code:

CSS (currently inline css, later external css file):

.divblock {
  padding: 0px;
  margin: 10px;
  border: darkgrey solid thin;    
  width: 130px;
  height: 50px;
  float: left;
}
.divinfo {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  width: 130px;
  font-size: x-small;
  float: none;
  background-color: lightgray;
}
.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  width: 2em;
  height: 2em;
}
/* Icon medium ~24x24 */
.icon24 {
  width: 1.5em;
  height: 1.5em;
}
/* Icon small ~16x16 */
.icon16 {
  width: 1em;
  height: 1em;
}
/* Icon micro ~10x10 */
.icon10 {
  width: 0.6em;
  height: 0.6em;
}

SVG Sprite named 'order.svg':

<svg style="; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-dimensions" viewBox="0 0 32 32"><title>dimensions</title><path class="path1" fill="#a40" d="M29.988 7.73l-14.145 7.457v16.134l14.145-7.457z"></path><path class="path2" fill="#d45500" d="M2.157 7.909l13.428 7.079v16.338l-13.428-7.402z"></path><path class="path3" fill="#ff7f2a" d="M2.245 7.721l13.566 7.351 14.051-7.492-13.7-6.944z"></path><path class="path4" fill="#000" stroke="#000" stroke-width="0.6704" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.894 23.448l13.551 7.542v0.142l-13.551-7.542v-0.142z"></path><path class="path5" fill="#000" stroke="#000" stroke-width="0.6916" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M30.191 23.519l-14.176 7.469v0.147l14.176-7.469v-0.147z"></path><path class="path6" fill="#000" stroke="#000" stroke-width="0.4723" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M15.51 14.723h0.383v16.108h-0.383v-16.108z"></path><path class="path7" fill="#000" d="M14.679 15.511l1.025-2.546 0.927 2.522z"></path><path class="path8" fill="#000" d="M28.83 23.127l2.738-0.18-1.871 1.929z"></path><path class="path9" fill="#000" d="M2.561 24.981l-1.718-2.14 2.653 0.426z"></path></symbol><symbol id="icon-adress_new" viewBox="0 0 32 32"><title>adress_new</title><path class="path1" fill="#dff3fd" d="M1 4h30c0.55 0 1 0.45 1 1v22c0 0.55-0.45 1-1 1h-30c-0.55 0-1-0.45-1-1v-22c0-0.55 0.45-1 1-1z"></path><path class="path2" fill="#b1e3fb" d="M31.663 4.253c0.206 0.184 0.337 0.45 0.337 0.747v22c0 0.55-0.45 1-1 1h-30c-0.253 0-0.488-0.097-0.662-0.253z"></path><path class="path3" fill="#fff" d="M23 6h7v8h-7z"></path><path class="path4" fill="#ebedef" d="M29.334 6h0.666v8h-7v-3.25z"></path><path class="path5" fill="#28b5f5" d="M24 7h5v6h-5z"></path><path class="path6" fill="#0299e3" d="M28 7h1v6h-5v-3z"></path><path class="path7" fill="#788f9b" d="M4 15h14v1h-14zM4 19h14v1h-14zM4 23h9v1h-9z"></path><path class="path8" fill="#546e7a" d="M17.334 15h0.666v1h-2zM5.334 24l1.331-1h6.334v1zM10.666 20l1.334-1h6v1z"></path><path class="path9" fill="#68ba1c" d="M24.068 17.271c3.754 0 6.797 3.104 6.797 6.932s-3.043 6.932-6.797 6.932c-3.754 0-6.797-3.104-6.797-6.932s3.043-6.932 6.797-6.932z"></path><path class="path10" fill="#53a616" d="M28.874 19.302c1.23 1.255 1.991 2.988 1.991 4.902 0 3.829-3.043 6.932-6.797 6.932-1.876 0-3.575-0.776-4.806-2.031z"></path><path class="path11" fill="#fff" d="M28.146 23.279v1.849h-3.172v3.235h-1.812v-3.235h-3.172v-1.849h3.172v-3.235h1.812v3.235z"></path><path class="path12" fill="#ebedef" d="M23.162 28.363v-3.235l1.812-1.849h3.172v1.849h-3.172v3.235z"></path></symbol>

HTML body:

<body><div class="divblock"><div class="divinfo">icon-dimensions</div><svg class="icon"><use xlink:href="order.svg#icon-dimensions"></use></svg><svg class="icon icon24"><use xlink:href="order.svg#icon-dimensions"></use></svg><svg class="icon icon16"><use xlink:href="order.svg#icon-dimensions"></use></svg><svg class="icon icon10"><use xlink:href="order.svg#icon-dimensions"></use></svg></div><div class="divblock"><div class="divinfo">icon-adress_new</div><svg class="icon"><use xlink:href="order.svg#icon-adress_new"></use></svg><svg class="icon icon24"><use xlink:href="order.svg#icon-adress_new"></use></svg><svg class="icon icon16"><use xlink:href="order.svg#icon-adress_new"></use></svg><svg class="icon icon10"><use xlink:href="order.svg#icon-adress_new"></use></svg></div>

IE11 isn't running in compatibility mode. No adblocker addon is installed/activated. Antivirus shouldn't be interferring as other browser can display the sprites.

Any ideas are very much appreciated.

Gruss / Best regards
-Tom
Debugging is twice as hard as writing the code in the first place.
Therefore, if you write the code as cleverly as possible,
you are, by definition, not smart enough to debug it. 010101100100011001010000011110000101001001101111011000110110101101110011