CODEWITHSUNDEEP
jqueryhtmlcsssvgcross-browser
Mudassar
Mudassar

Reputation: 117

SVG not taking full width on internet explorer

I'm loading SVG map using JQuery Ajax in my website that is working fine on all browsers except internet explorer. its not taking full width in internet explorer, I tried to add width 100% using CSS but didn't work.

I attached bellow SVG view on different browsers and SVG code for better understanding.

enter image description here

       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="-279 414.72 35.58 13.17" style="enable-background:new -279 
        414.72 35.58 13.17;"xml:space="preserve">
        ....</svg>

Thanks

Upvotes: 2

Views: 1001

Answers (3)

Peter Breen
Peter Breen

Reputation: 447

I came up with this workaround, which is working for me and avoids having to use a bunch of media queries:

HTML

<div class='container'>
    <svg>
       ...
    </svg>
</div>

CSS

.container {
    height: 0;
    padding-top: 61%; (corresponding to the aspect ratio of your SVG)
    position: relative;
}    

svg {
   position: absolute;
   top: 0
   left: 0;
   height: 100%;
   width: 100%;
}

Upvotes: 0

Soul Eater
Soul Eater

Reputation: 505

The thing with Internet Explorer is that it requires a Height in pixels to work. If you put a normal svg image and you want to make it "responsive" you need to work with percentages:

<div id="some_div">
   <svg id="my_svg">...</svg>
</div>

<style>
   #my_svg {
      max-width: 500px; /*--- just added this to limit the width ---*/
      width: 100%;
      height: auto; /*--- or you can even avoid putting the "height"---*/
   }
</style>

The code will work fine in most browsers, but IE won't know the size so it will make the image very small. You need to declare the height size of your image:

<style>
   #my_svg {
      max-width: 500px;
      width: 100%;
      height: 350px; /*--- supposing the height  of you svg is 350px---*/
   }
</style>

This way your image will take the size you are looking. The only bad thing is that everytime you reduce the size of the browser there will be a "blank space" around your image, this because the width (100%) will change but the height will stay 350 pixels. You may want to erase those blank spaces with some @medias every time the browser's screen reduces the size:

<div id="some_div">
   <svg id="my_svg">...</svg>
</div>

<style>
   #my_svg {
      max-width: 500px;
      width: 100%;
      height: 350px;
   }
   @media (max-width: 1100px) {
      #my_svg {
         height: 250px;
      }
   }
   @media (max-width: 900px) {
      #my_svg {
         height: 150px;
      }
   }
   ...
</style>

Upvotes: 3

Dave Martin
Dave Martin

Reputation: 49

I'm assuming you have loaded your SVG inside an image tag, and are not targeting correctly using CSS.

This targets every tag with src that ends in ".svg" in IE10, and IE11: from Fix SVG in tags not scaling in IE9, IE10, IE11 via caniuse.com

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: 
none) {
 img[src$=".svg"] {
   width: 100%; 
 }
}

IE does not respect ratios of SVG images inside tags in fluid layouts. All other browsers scale SVG images as expected.

Upvotes: 0

Related Questions