0

I have an inline SVG graphic with an aspect ratio I want to preserve. I'm displaying it as 100% of the body tag which is its parent. The image has a 10:3 aspect ratio.

svg{width:100%;margin:0;padding:0;overflow:hidden;display:block;background:#0f0}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300">
<path d="m1.25e-5 0v300h1e3v-300zm500 71.449 68.031 39.277v78.557l-68.031 39.279-68.031-39.279v-78.557z" fill="#f00"/>
</svg>

Chrome makes the image the width of the body and gives it the right height. For example, if the width is 688px then the height is 206.39px.

Internet Explorer gives me a width of 688px and a height of 150px. While it preserves the aspect ratio of the red object, it gives me green bars on the side as the background seeps through.

I've tried various Stack Overflow solutions such as {max-width:100%;height:auto} but I haven't found anything that works.

GFL
  • 1,278
  • 2
  • 15
  • 24
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio – Sergey Rudenko Apr 04 '18 at 04:46
  • Thank you, I played around with the preserveAspectRatio attribute, but it just altered the components inside the svg tag. My issue is the svg div is not keeping the expected aspect ratio. – GFL Apr 04 '18 at 07:11
  • Related - https://stackoverflow.com/questions/23630732/svg-width-in-ie9 – Paulie_D Apr 04 '18 at 11:41

0 Answers0