Why isn't internet explorer displaying my .svg images correctly?

Question

I have an image in my html file:

<img src="../path-to-image/image.svg" class="image-class" /> 

and some simple css:

.image-class{
      height: 80px;
      width: 80px;
  }

However, instead of displaying this as an 80x80 image, the image displayed is larger, and only a sub-section of it is being displayed. This code works in all other browsers except for IE 11, which I made sure was fully updated.

Here is the .svg code below:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
<g>
<title fill="#695ba8">Layer 1</title>
<path fill="#695ba8" id="svg_2" d="m50,21.101c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899s-1.9,0.781 -1.9,1.899c0,1.118 0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_3" d="m50,26.7c1.119,0 1.9,-0.781 1.9,-1.899c0,-1.119 -0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_4" d="m50,15.501c1.119,0 1.9,-0.781 1.9,-1.9s-0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9s0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_5" d="m85,16.9c1.118,0 1.899,-0.781 1.899,-1.899c0,-1.119 -0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_6" d="m55.6,15.501c1.119,0 1.9,-0.781 1.9,-1.9s-0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9s0.78,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_7" d="m55.6,26.7c1.119,0 1.9,-0.781 1.9,-1.899c0,-1.119 -0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9c-0.001,1.118 0.78,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_8" d="m55.6,21.101c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899s-1.9,0.781 -1.9,1.899c-0.001,1.118 0.78,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_9" d="m44.4,15.501c1.118,0 1.899,-0.781 1.899,-1.9s-0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9s0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_10" d="m83.6,4.7l-67.2,0c-6.451,0 -11.7,5.249 -11.7,11.7l0,72.8c0,3.363 2.736,6.1 6.1,6.1l78.399,0c3.364,0 6.101,-2.736 6.101,-6.1l0,-72.8c0,-6.451 -5.249,-11.7 -11.7,-11.7zm-67.2,3.801l67.2,0c4.356,0 7.9,3.544 7.9,7.899l0,13.5l-83,0l0,-13.5c0,-4.355 3.544,-7.899 7.9,-7.899zm58.799,38.199l-50.399,0c-6.451,0 -11.7,5.249 -11.7,11.7l0,33.101l-2.3,0c-1.268,0 -2.3,-1.032 -2.3,-2.301l0,-55.5l83,0l0,55.5c0,1.269 -1.032,2.301 -2.301,2.301l-2.3,0l0,-33.101c0,-6.451 -5.249,-11.7 -11.7,-11.7zm-33.099,8.401l0,-4.6l15.8,0l0,4.6l-15.8,0zm-25.2,3.299c0,-4.355 3.544,-7.899 7.9,-7.899l13.5,0l0,5.1c0,1.819 1.48,3.3 3.3,3.3l16.8,0c1.819,0 3.299,-1.48 3.299,-3.3l0,-5.1l13.5,0c4.356,0 7.9,3.544 7.9,7.899l0,10.7l-66.199,0l0,-10.7zm66.2,14.781l0,18.32l-66.2,0l0,-18.32l66.2,0z"/>
<path fill="#695ba8" id="svg_11" d="m57,38.301l-14,0c-1.119,0 -1.9,0.781 -1.9,1.899c0,1.119 0.781,1.9 1.9,1.9l14,0c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899z"/>
<path fill="#695ba8" id="svg_12" d="m40.199,84.101l19.601,0c1.118,0 1.899,-0.781 1.899,-1.9s-0.781,-1.9 -1.899,-1.9l-19.601,0c-1.118,0 -1.899,0.781 -1.899,1.9s0.781,1.9 1.899,1.9z"/>
<path fill="#695ba8" id="svg_13" d="m44.4,21.101c1.118,0 1.899,-0.781 1.899,-1.9c0,-1.118 -0.781,-1.899 -1.899,-1.899c-1.119,0 -1.9,0.781 -1.9,1.899c0,1.118 0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_14" d="m39.3,13.101l-26.2,0l0,12.2l26.2,0l0,-12.2zm-22.4,8.4l0,-4.601l18.6,0l0,4.601l-18.6,0z"/>
<path fill="#695ba8" id="svg_15" d="m44.4,26.7c1.118,0 1.899,-0.781 1.899,-1.899c0,-1.119 -0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
 </g>
</svg>

Here is the second image that seems to have extra padding when changing the size:

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">

 <title/>
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
 <g>  
<title fill="#695ba8">Layer 1</title>
<path fill="#695ba8" id="svg_1" d="m41,21a9,9 0 1 0 -9,9a9.01,9.01 0 0 0 9,-9zm-16,0a7,7 0 1 1 7,7a7.009,7.009 0 0 1 -7,-7z" class="cls-1"/>
<path fill="#695ba8" id="svg_2" d="m37,21a5,5 0 1 0 -5,5a5.006,5.006 0 0 0 5,-5zm-8,0a3,3 0 1 1 3,3a3,3 0 0 1 -3,-3z" class="cls-1"/>
<path fill="#695ba8" id="svg_3" d="m48,60l-4,0l0,-5a1,1 0 0 0 -1,-1l-8,0l0,-9l3,0a1,1 0 0 0 1,-1l0,-5.353a18.972,18.972 0 0 0 -0.218,-35.374c-0.032,-0.011 -0.056,-0.034 -0.09,-0.043c-0.01,0 -0.02,0 -0.03,0a18.671,18.671 0 0 0 -13.324,0c-0.01,0 -0.02,0 -0.03,0c-0.034,0.009 -0.058,0.032 -0.09,0.043a18.973,18.973 0 0 0 -0.218,35.375l0,5.352a1,1 0 0 0 1,1l3,0l0,9l-8,0a1,1 0 0 0 -1,1l0,5l-4,0a1,1 0 0 0 0,2l32,0a1,1 0 0 0 0,-2zm-10.741,-55.158l-1.039,4.158l-8.44,0l-1.039,-4.158a16.844,16.844 0 0 1 10.518,0zm-22.259,16.158a17.006,17.006 0 0 1 9.867,-15.41l1.163,4.652a1,1 0 0 0 0.97,0.758l10,0a1,1 0 0 0 0.97,-0.758l1.163,-4.652a16.99,16.99 0 0 1 -10.009,32.164a16.6,16.6 0 0 1 -2.791,-0.728a17.023,17.023 0 0 1 -11.333,-16.026zm12,18.332c0.037,0.01 0.075,0.017 0.112,0.027c0.132,0.035 0.266,0.062 0.4,0.094c0.338,0.082 0.676,0.157 1.019,0.22c0.186,0.035 0.374,0.065 0.562,0.094c0.3,0.046 0.594,0.083 0.894,0.114c0.2,0.021 0.393,0.044 0.591,0.059c0.37,0.027 0.74,0.041 1.111,0.047c0.105,0 0.208,0.013 0.313,0.013s0.208,-0.011 0.313,-0.013c0.371,-0.006 0.741,-0.02 1.111,-0.047c0.2,-0.015 0.4,-0.038 0.592,-0.059c0.3,-0.031 0.595,-0.068 0.892,-0.114c0.188,-0.029 0.377,-0.059 0.565,-0.094c0.339,-0.063 0.675,-0.137 1.01,-0.218c0.135,-0.033 0.271,-0.061 0.405,-0.1c0.037,-0.01 0.075,-0.017 0.112,-0.027l0,3.672l-10.002,0l0,-3.668zm4,5.668l2,0l0,9l-2,0l0,-9zm-9,15l0,-4l20,0l0,4l-20,0z" class="cls-1"/>
<path fill="#695ba8" id="svg_4" d="m25,57l-1,0a1,1 0 0 0 0,2l1,0a1,1 0 0 0 0,-2z" class="cls-1"/>
<path fill="#695ba8" id="svg_5" d="m18,20l-1,0a1,1 0 0 0 0,2l1,0a1,1 0 0 0 0,-2z" class="cls-1"/>
</g>
</svg>

Answer 1

The best solution is to replace the width / height of the viewBox What is your second problem, please give some screeen because I don't know what's going on. I just checked under IE11 and scales well svg I don't see any extra padding.

.image-class {
  height: 50px;
  width: 50px;
}

<img src="./test.svg" class="image-class" />

// add this part to the test.svg file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <path fill="none" d="M-1-1h582v402H-1z"/>
  <g>
    <path fill="#695ba8" d="M50 21.101c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899s-1.9.781-1.9 1.899c0 1.118.781 1.9 1.9 1.9zM50 26.7c1.119 0 1.9-.781 1.9-1.899 0-1.119-.781-1.9-1.9-1.9s-1.9.781-1.9 1.9c0 1.118.781 1.899 1.9 1.899zM50 15.501c1.119 0 1.9-.781 1.9-1.9s-.781-1.9-1.9-1.9-1.9.781-1.9 1.9.781 1.9 1.9 1.9zM85 16.9c1.118 0 1.899-.781 1.899-1.899 0-1.119-.781-1.9-1.899-1.9-1.119 0-1.9.781-1.9 1.9 0 1.118.781 1.899 1.9 1.899zM55.6 15.501c1.119 0 1.9-.781 1.9-1.9s-.781-1.9-1.9-1.9-1.9.781-1.9 1.9.78 1.9 1.9 1.9zM55.6 26.7c1.119 0 1.9-.781 1.9-1.899 0-1.119-.781-1.9-1.9-1.9s-1.9.781-1.9 1.9c-.001 1.118.78 1.899 1.9 1.899zM55.6 21.101c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899s-1.9.781-1.9 1.899c-.001 1.118.78 1.9 1.9 1.9zM44.4 15.501c1.118 0 1.899-.781 1.899-1.9s-.781-1.9-1.899-1.9c-1.119 0-1.9.781-1.9 1.9s.781 1.9 1.9 1.9z"/>
    <path fill="#695ba8" d="M83.6 4.7H16.4C9.949 4.7 4.7 9.949 4.7 16.4v72.8c0 3.363 2.736 6.1 6.1 6.1h78.399a6.107 6.107 0 006.101-6.1V16.4c0-6.451-5.249-11.7-11.7-11.7zM16.4 8.501h67.2c4.356 0 7.9 3.544 7.9 7.899v13.5h-83V16.4c0-4.355 3.544-7.899 7.9-7.899zM75.199 46.7H24.8c-6.451 0-11.7 5.249-11.7 11.7v33.101h-2.3A2.303 2.303 0 018.5 89.2V33.7h83v55.5a2.303 2.303 0 01-2.301 2.301h-2.3V58.4c0-6.451-5.249-11.7-11.7-11.7zM42.1 55.101v-4.6h15.8v4.6H42.1zM16.9 58.4c0-4.355 3.544-7.899 7.9-7.899h13.5v5.1c0 1.819 1.48 3.3 3.3 3.3h16.8a3.303 3.303 0 003.299-3.3v-5.1h13.5c4.356 0 7.9 3.544 7.9 7.899v10.7H16.9V58.4zm66.2 14.781v18.32H16.9v-18.32h66.2z"/>
    <path fill="#695ba8" d="M57 38.301H43c-1.119 0-1.9.781-1.9 1.899 0 1.119.781 1.9 1.9 1.9h14c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899zM40.199 84.101H59.8c1.118 0 1.899-.781 1.899-1.9s-.781-1.9-1.899-1.9H40.199c-1.118 0-1.899.781-1.899 1.9s.781 1.9 1.899 1.9zM44.4 21.101c1.118 0 1.899-.781 1.899-1.9 0-1.118-.781-1.899-1.899-1.899-1.119 0-1.9.781-1.9 1.899 0 1.118.781 1.9 1.9 1.9zM39.3 13.101H13.1v12.2h26.2v-12.2zm-22.4 8.4V16.9h18.6v4.601H16.9zM44.4 26.7c1.118 0 1.899-.781 1.899-1.899 0-1.119-.781-1.9-1.899-1.9-1.119 0-1.9.781-1.9 1.9 0 1.118.781 1.899 1.9 1.899z"/>
  </g>
</svg>

second repaired svg file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <g fill="#695ba8">
    <path d="M64.099 32.766c0-7.734-6.365-14.1-14.1-14.1-7.734 0-14.099 6.366-14.099 14.1 0 7.735 6.365 14.1 14.1 14.1 7.73-.008 14.091-6.368 14.099-14.1zm-25.066 0c0-6.015 4.95-10.966 10.966-10.966 6.016 0 10.967 4.95 10.967 10.966 0 6.016-4.95 10.967-10.967 10.967-6.012-.008-10.958-4.954-10.966-10.967z"/>
    <path d="M57.833 32.766c0-4.297-3.536-7.833-7.834-7.833-4.297 0-7.833 3.536-7.833 7.833 0 4.298 3.536 7.833 7.833 7.833 4.296-.004 7.829-3.537 7.834-7.833zm-12.533 0c0-2.578 2.12-4.7 4.7-4.7 2.578 0 4.7 2.122 4.7 4.7 0 2.579-2.122 4.7-4.7 4.7-2.58 0-4.7-2.121-4.7-4.7z"/>
    <path d="M75.065 93.864H68.8v-7.833c0-.86-.707-1.566-1.567-1.566H54.7v-14.1h4.7c.86 0 1.567-.707 1.567-1.567v-8.386c11.322-4.472 18.8-15.468 18.8-27.642 0-12.306-7.643-23.395-19.142-27.775-.05-.017-.088-.053-.14-.067h-.048a29.26 29.26 0 00-20.873 0h-.047c-.054.014-.091.05-.141.067-11.5 4.382-19.141 15.47-19.141 27.776 0 12.173 7.477 23.169 18.8 27.643v8.384c0 .86.706 1.567 1.566 1.567h4.7v14.1H32.767c-.86 0-1.567.706-1.567 1.566v7.833h-6.266c-.86 0-1.567.707-1.567 1.567s.707 1.566 1.567 1.566h50.131c.86 0 1.567-.706 1.567-1.566 0-.86-.707-1.567-1.567-1.567zM58.238 7.454l-1.627 6.513H43.388l-1.627-6.514a26.381 26.381 0 0116.477 0zm-34.87 25.312A26.682 26.682 0 0138.824 8.625l1.822 7.288a1.571 1.571 0 001.52 1.187h15.666c.715 0 1.345-.492 1.52-1.187l1.821-7.288A26.656 26.656 0 0176.611 32.78c0 14.601-12.015 26.617-26.616 26.617a26.586 26.586 0 01-8.873-1.524C30.514 54.11 23.38 44.02 23.367 32.766zm18.798 28.72c.058.015.118.026.176.042.207.055.417.097.627.147a27.14 27.14 0 002.477.492c.47.072.93.13 1.4.179.313.032.616.068.926.092.58.042 1.16.064 1.74.074.165 0 .326.02.49.02.165 0 .326-.017.491-.02a30.72 30.72 0 001.74-.074c.314-.024.627-.06.928-.092.47-.049.932-.107 1.397-.18.295-.044.59-.091.885-.146a30.242 30.242 0 001.583-.342c.211-.052.424-.095.634-.156.058-.016.118-.027.176-.043v5.753h-15.67v-5.747zm6.267 8.879h3.133v14.1h-3.133v-14.1zm-14.1 23.5v-6.267h31.333v6.266H34.333z"/>
    <path d="M39.033 89.164h-1.566c-.86 0-1.567.707-1.567 1.567s.707 1.567 1.567 1.567h1.566c.86 0 1.567-.707 1.567-1.567s-.707-1.567-1.567-1.567zM28.067 31.2H26.5c-.86 0-1.566.706-1.566 1.566 0 .86.706 1.567 1.566 1.567h1.567c.86 0 1.567-.707 1.567-1.567s-.707-1.566-1.567-1.566z"/>
  </g>
</svg>

The above example is not the best solution for adding icon to the page, it's best to use inline icons. Why? Because of the performance. Below how you can do this also works in IE11. Each icon is a separate symbol with the id we refer to.

.image-class {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <g fill="#695ba8">
          <path
            d="M64.099 32.766c0-7.734-6.365-14.1-14.1-14.1-7.734 0-14.099 6.366-14.099 14.1 0 7.735 6.365 14.1 14.1 14.1 7.73-.008 14.091-6.368 14.099-14.1zm-25.066 0c0-6.015 4.95-10.966 10.966-10.966 6.016 0 10.967 4.95 10.967 10.966 0 6.016-4.95 10.967-10.967 10.967-6.012-.008-10.958-4.954-10.966-10.967z" />
          <path
            d="M57.833 32.766c0-4.297-3.536-7.833-7.834-7.833-4.297 0-7.833 3.536-7.833 7.833 0 4.298 3.536 7.833 7.833 7.833 4.296-.004 7.829-3.537 7.834-7.833zm-12.533 0c0-2.578 2.12-4.7 4.7-4.7 2.578 0 4.7 2.122 4.7 4.7 0 2.579-2.122 4.7-4.7 4.7-2.58 0-4.7-2.121-4.7-4.7z" />
          <path
            d="M75.065 93.864H68.8v-7.833c0-.86-.707-1.566-1.567-1.566H54.7v-14.1h4.7c.86 0 1.567-.707 1.567-1.567v-8.386c11.322-4.472 18.8-15.468 18.8-27.642 0-12.306-7.643-23.395-19.142-27.775-.05-.017-.088-.053-.14-.067h-.048a29.26 29.26 0 00-20.873 0h-.047c-.054.014-.091.05-.141.067-11.5 4.382-19.141 15.47-19.141 27.776 0 12.173 7.477 23.169 18.8 27.643v8.384c0 .86.706 1.567 1.566 1.567h4.7v14.1H32.767c-.86 0-1.567.706-1.567 1.566v7.833h-6.266c-.86 0-1.567.707-1.567 1.567s.707 1.566 1.567 1.566h50.131c.86 0 1.567-.706 1.567-1.566 0-.86-.707-1.567-1.567-1.567zM58.238 7.454l-1.627 6.513H43.388l-1.627-6.514a26.381 26.381 0 0116.477 0zm-34.87 25.312A26.682 26.682 0 0138.824 8.625l1.822 7.288a1.571 1.571 0 001.52 1.187h15.666c.715 0 1.345-.492 1.52-1.187l1.821-7.288A26.656 26.656 0 0176.611 32.78c0 14.601-12.015 26.617-26.616 26.617a26.586 26.586 0 01-8.873-1.524C30.514 54.11 23.38 44.02 23.367 32.766zm18.798 28.72c.058.015.118.026.176.042.207.055.417.097.627.147a27.14 27.14 0 002.477.492c.47.072.93.13 1.4.179.313.032.616.068.926.092.58.042 1.16.064 1.74.074.165 0 .326.02.49.02.165 0 .326-.017.491-.02a30.72 30.72 0 001.74-.074c.314-.024.627-.06.928-.092.47-.049.932-.107 1.397-.18.295-.044.59-.091.885-.146a30.242 30.242 0 001.583-.342c.211-.052.424-.095.634-.156.058-.016.118-.027.176-.043v5.753h-15.67v-5.747zm6.267 8.879h3.133v14.1h-3.133v-14.1zm-14.1 23.5v-6.267h31.333v6.266H34.333z" />
          <path
            d="M39.033 89.164h-1.566c-.86 0-1.567.707-1.567 1.567s.707 1.567 1.567 1.567h1.566c.86 0 1.567-.707 1.567-1.567s-.707-1.567-1.567-1.567zM28.067 31.2H26.5c-.86 0-1.566.706-1.566 1.566 0 .86.706 1.567 1.566 1.567h1.567c.86 0 1.567-.707 1.567-1.567s-.707-1.566-1.567-1.566z" />
        </g>
      </symbol>
    </svg>


<svg class="image-class">
  <use xlink:href="#icon"></use>
</svg>