Using SVG images with Maximum Cross-Browser Compatibility

posted by Kravimir at 10:36 PM on Oct. 29th, 2013

Categories: HTML, Intermediate, Web Images 0 comments

This technique is complex, using an object element and IE's "conditional comments" in addition to at least one img element, but it avoids using JavaScript for something that's not behavioral. The conditional comments are used because IE, or at least older versions of Internet Explorer, don't correctly handle the fallback procedure for object elements, so since we know which versions don't support SVG, we simply hide the object element from them. Fortunately IE9 supports SVG, so we're well clear of the issue that conditional comments are not available in IE10 and newer.

Here's the version I've been using:

Code:
<!--[if (!IE)|(gt IE 8)]><!--><object data="images/logo.svg" type="image/svg+xml">
	<img src="images/logo.png" alt="">
</object><!--<![endif]-->
<!--[if lt IE 9]><img src="images/logo.png" alt=""><![endif]-->

Here's the shorter version which may be more confusing to those who aren't familiar with the more advanced uses of conditional comments:

Code:
<!--[if (!IE)|(gt IE 8)]><!--><object data="images/logo.svg" type="image/svg+xml"><!--<![endif]-->
	<img src="images/logo.png" alt="">
<!--[if (!IE)|(gt IE 8)]><!--></object><!--<![endif]-->

Now you might expect that to be it. However, in many browsers clicking on an object element that is nested within a link does not activate the link. The solution is to absolutely position another element (or pseudo-element) within the link over the top of the object element. Since object elements don't have alternate text the same way img elements do, I've been using an img element as the absolutely positioned element.

Code:
<a href="#" id="logo">
	<img src="images/clear.gif" class="link" alt="alternative text for the SVG/PNG here">
	<!--[if (!IE)|(gt IE 8)]><!-->
	<object data="images/logo.svg" type="image/svg+xml"><img src="images/logo.png" alt=""></object>
	<!--<![endif]-->
	<!--[if lt IE 9]><img src="images/logo.png" alt=""><![endif]-->
</a> <!-- /#logo -->

For using SVG as a background image in CSS with a PNG fallback, check these articles out:

There aren't any comments on this blog entry yet.

Comment Form: