SVG and Internet Explorer?

Does anyone know if SVG is working in a re开发者_C百科cent version of IE?

You need a plugin to get it in a current stable version of IE. However, IE9 should have SVG support out of the box when it is released (Microsoft blog post).

IE below version 9 are not supporting the SVG component , but IE 8 and below support VML but to make SVG working in a recent version of IE , you can just enter below code in your head of html file

<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--[if IE]>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
 .chromeFrameInstallDefaultStyle {
  position:fixed;
  overflow:auto;
  width: 800px; /* default is 800px */
  height: 80%; /* default is 800px */
  border: 5px solid blue;
  right:100px;
  bottom:100px;
  z-index: 99999 !important;
 }
</style>

<div id="prompt">
  <!-- if IE without GCF, prompt goes here -->
</div>

<script>
    // The conditional ensures that this code will only execute in IE,
    // Therefore we can use the IE-specific attachEvent without worry
    window.attachEvent("onload", function() {
        CFInstall.check({
            mode: "inline", // the default
            node: "prompt"
        });
    });
</script>
<![endif]-->

This will ask user to install the google frame on the IE . Just take few minutes . After that all html5 components as well SVG components work .

http://caniuse.com/#search=svg

for IE

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Modernizr :

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
    background-image: url(logo.png);
}

and other solution :

<svg> ... </svg>
<div class="fallback"></div>


.logo-fallback {
  display: none;

}
.no-svg .logo-fallback {
  background-image: url(logo.png);
}