How to preserve the aspect ratio of an inline SVG in IE (and other browsers)?

Question

The following code snippet illustrates my problem:

<style>
div {
  background-color: #00FF00;
  width: 80px;
}
svg {
  background-color: #FF0000;
  vertical-align: top;
  width: 100%;
  height: auto; // PROBLEM
}
rect { fill: #0000FF; }
</style>
<div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"
    image-rendering="optimizeQuality"
    fill-rule="evenodd"
    clip-rule="evenodd"
    preserveAspectRatio="xMidYMid meet"
    width="100"
    height="100"
    >
    <rect width="90" height="90" x="5" y="5" />
  </svg>
</div>

The SVG should be a red square (with a blue square drawn into it), which scales down with respect the its parent div tag while preserving its aspect ratio. The above example works fine in Firefox, Chrome (for Desktop and Android), Safari and Edge. It renders a 80x80px red square:

Only Internet Explorer 10 and 11 stretch the SVG vertically to about twice its intended height, so 80x160px:

The SVG is scaled to 80x100px if I remove / comment the "height: auto" statement in the stylesheet. Yet, this breaks Chrome, which also scales the SVG to 80x100px in this case. Firefox and Edge seem to be able to deal with removing this statement.

Interestingly, the aspect ratio of polygons etc. in the SVG is always perfectly maintained, check the blue square, while the polygons are usually drawn in the vertical center of the SVG which is being stretched. It's the "SVG-container"/SVG-tag, which causes trouble and consumes more space than it should.

How can I solve this cross-browser?

I built a small JSFiddle to demonstrate the issue.

There is a closely related question entitled "SVGs not scaling properly in IE - has extra space". The key difference is that I do in fact provide a width and a height directly in the svg-tag, which I need to do for Android browser compatibility. IE breaks nevertheless. The canvas-approach described by Paul LeBeau seems to follow different assumptions.

This question is a variation of the following older questions, yet not identical:

The following gist is interesting but not helpful either:

Fix SVG in tags not scaling in IE9, IE10, IE11 (it really is about SVGs in img-tags and removing the width and height parameters in the SVG tag does not work for me)

There is an approach called the "padding hack", which is described here:

s-m-e · Answer 1 · 2017-05-09T14:43:08.410

This answer is only for reference - I am still looking for a better, less complicated (and less idiotic) way to do this.

Ok, along the lines of the "padding hack", the following seems to work across browsers:

<style>
div#outer {
  background-color: #00FF00;
  width: 80px;
}
div#container {
  position: relative; 
  height: 0; 
  width: 100%; 
  padding: 0;
  padding-bottom: 100%; /* 100% * height/width */
}
svg {
  background-color: #FF0000;
  position: absolute; 
  height: 100%; 
  width: 100%; 
  left: 0; 
  top: 0;
}
rect { fill: #0000FF; }
</style>
<div id="outer">
  <div id="container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      shape-rendering="geometricPrecision"
      text-rendering="geometricPrecision"
      image-rendering="optimizeQuality"
      fill-rule="evenodd"
      clip-rule="evenodd"
      preserveAspectRatio="xMidYMid meet"
      width="100"
      height="100"
      >
      <rect width="90" height="90" x="5" y="5" />
    </svg>
  </div>
</div>

There is also an updated JSFiddle.

Marco · Answer 2 · 2019-08-14T20:18:21.077

Another Solution is the Padding-Bottom Hack (Padding-Bottom: Width/Height*100) Here an example with responsive svg-clippath and ie11+up support

<svg class="clipper" width="0" height="0">
    <defs>
        <clipPath id="clippath" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01136364)">
            <path d="M78.24,5.09S75.53.46,70.15.46H29.85s-5.38,0-8.09,4.63L1.66,39.37S-1,44,1.66,48.63l20.1,34.28s2.71,4.63,8.09,4.63h40.3s5.38,0,8.09-4.63l20.1-34.28s2.71-4.63,0-9.26Z"></path>
        </clipPath>
    </defs>
</svg>      

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 88" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 88%; height: 1px; overflow: visible">>
      <image xlink:href="http://www.domain.de/image-with-aspect-ratio-100-88.jpg" x="0" y="0" height="100%" width="100%" style="clip-path: url(#clippath);">
      </image>
  </svg>

How to preserve the aspect ratio of an inline SVG in IE (and other browsers)?

2 Answers2