CODEWITHSUNDEEP
internet-explorersvgrenderingblogger
Praveen Sripati
Praveen Sripati

Reputation: 33545

SVG not getting displayed in IE 11

I have used a couple of svg images from OpenClipart in my site. The svg images get properly displayed in Chrome and Firefox. But, when I see the site is IE11 the image is shown as below. I tried a couple of tips from SO and other sites, but they didn't make any difference.

enter image description here

Here is the site built using blogger. And here is the corresponding html code.

<a href="http://www.thecloudavenue.com/search/label/gettingstarted">
   <img src="http://openclipart.org/people/shokunin/runer_start.svg" style="border: none" height="110" width="110" align="middle"/>
</a>

How to get around this? If I replace svg with some other type, then it should work. But, I am curious why svg are getting displayed.

Upvotes: 0

Views: 8457

Answers (2)

Mark Bellamy
Mark Bellamy

Reputation: 135

You need something like the following declaring the svg containers with the image tags inside. This example has two images so I can toggle an active/inactive condition with Javascript. Also you must close the image tags manually, "<image />" self closing tags are not allowed in IE.

<svg id="globalNav_icon_usersSearch" height="20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image class="icon_search" x="0" y="0" height="20" width="20"  xlink:href="svg/icon_search.svg"></image>
        <image class="icon_search_grey" x="0" y="0" height="20" width="20"  xlink:href="svg/icon_seacrh_grey2.svg"></image>
      </svg>

Upvotes: 0

Paul Sweatte
Paul Sweatte

Reputation: 24637

IE support for SVG deviates from the standard in several areas. Here are a few:

  • Properties of a marker element inherit at the point of reference, not from the ancestors of the marker element
  • The pathLength attribute is not supported
  • Parameters for viewBox elements in fragment specifications may be delimited by single spaces in addition to commas
  • The display property affects pattern elements and references to those pattern elements.
  • SMIL animation is not supported. In addition, no references to animation elements, properties, attributes, interfaces, or data types in other chapters of SVG 1.1 are supported.
  • For data types that can be animated, the default setting for the animVal attribute is animVal = baseVal.

References

Upvotes: 2

Related Questions