0

My SVG images work fine on all browser, except IE (surprise...).

Here is my test page: http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview

As you can see, the first svg is displayed OK (even in IE), but the next two are not. They scale down to a container (table -> tr -> td in this case).

Code:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    /* this will be applied to the images */  
    .smallicon {
      width: 16px;
      padding: 5px;
    }
  </style>
</head>

<body>
  <p>
    Problem exists in Internet Explorer only
    <br> This is fine:
  </p>

  <object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object>

  <table>
    <thead>
      <tr>
        <th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th>
        <th>This doesn't work either:</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <img  class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'>
        </td>
        <td>
          <object  class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Any ideas?

BTW, I know this question is already there and is answered ( SVG in img element proportions not respected in ie9 ), however, the solution simply doesn't work - I don't have width and height specified in my SVG files, while I do have a viewbox specified.

Community
  • 1
  • 1
konrad_firm
  • 859
  • 1
  • 11
  • 28

1 Answers1

1

Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.

You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181