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.