Why Aren't My SVGs Scaling Correctly in Internet Explorer?

SVGs not Scaling Properly in IE - has extra space

Problem: When using SVG symbols for responsiveness, the SVGs do not scale properly in Internet Explorer (IE).

Answer: IE has a bug that prevents SVGs from scaling correctly unless both the width and height are specified.

Solution:

Use a trick discovered by Nicolas Gallagher:

1. Add a element with the same aspect ratio as the SVG to the
   containing the SVG.
2. Make the invisible with visibility: hidden.
3. Position the SVG absolutely within the
   and set its width to 100%.

   Code:

   <div>
   <p><strong>CSS:</strong></p>
   <pre class="brush:php;toolbar:false">canvas {
       display: block;
       width: 100%;
       visibility: hidden;
   }
   
   svg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
   }

   Note: This trick forces IE to scale the SVG correctly by using the as a reference.