CODEWITHSUNDEEP
cssinternet-explorersvgresponsive-designviewbox
Marek
Marek

Reputation: 317

IE svg scaling issue

On this website, there are four svg logos in the .logo-bar container. Each of them is put inside of an image tag like so: 

<div class="logo-bar">
    <p class="logo">
        <a href=""><img src="resources/img/miterassa_logo.svg" alt=""></a>
    </p>

The viewBox is set inside of each svg file: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="339.827px" height="84.337px" viewBox="0 0 339.827 84.337" enable-background="new 0 0 339.827 84.337" xml:space="preserve">

IE11 on Windows 7 and Windows 8.1 does not seem to scale svg's properly.

Every now and then, after initial load or refresh of the page, only some of the logo's are scaled incorrectly.

P.S. I tried to reproduce the problem in jsfiddle but the problem never came.

Upvotes: 2

Views: 1436

Answers (2)

Nathan Hensher
Nathan Hensher

Reputation: 326

You'll need to set he height and width of the SVG using CSS. I would recommend adding the browser and version to the body tags class using this: 

// Loop through each of the available browsers
jQuery.each(jQuery.browser, function(i, val) {  
if(val != true){
// Render the browser type
        $(document.body).addClass("v"+parseInt(val));
    }
// Render the browser version
    else{
        $(document.body).addClass(i);
    }   
});

Then add this CSS: 

.msie.v9 svg, .msie.v10 svg {
  width: 100%; 
  height:600px; // Add your own height here
}

Upvotes: 0

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

Using svg in <img> is perfectly fine from a web standards viewpoint, and should work fine (you should file an IE bugreport if it doesn't). Have you tried setting the size of the <img> elements in css and removing the width and height attributes from the svg root elements?

The stylerules that apply to the logo-class and its children may affect the result as well.

Upvotes: 1

Related Questions