Inline SVG with IE8 Fallback Support

SVG scales nicely for responsive sites, and it’s great for displaying super crisp logos on any device or resolution. As a bonus, CSS can be applied to an inline <svg> and each group, path or shape.

However, IE8 lacks support and the DOM doesn’t render properly after it encounters the <svg> tag. A PNG fallback can be used, but hiding the SVG with CSS won’t help; the browser simply chokes on the tag.

Conditional PNG Fallback

A combination of conditional statements works well. One to hide the <svg> from IE8, and the second to conditionally display a PNG.

Here’s the simplified version for reference:

<!--[if gte IE 9]><!-->
  <svg>[groups, paths, etc.]</svg>
<!--<![endif]-->

<!--[if lte IE 8]>
  <img src="example.png">
<![endif]-->

And here’s the code in action:

If you remove the second condition and update the font-size, you’ll notice both SVG and PNG scale proportionally, but the PNG is fuzzy on high-resolution screens, whereas the SVG displays perfectly at any size.

For more info Chris Coyier has written a comprehensive post about Using SVG.