SVG Fallback in Older Browsers: Alternatives to JavaScript

SVG sees widespread support by recent browsers these days. Still plenty of people do not surf the web using one of these modern browsers. Especially the older versions of Internet Explorer are used in relevant numbers worldwide. And these older versions cause problems, not only, but also when it comes to SVG. IE simply doesn't know SVG, so we need to offer PNG or JPEG as a fallback. Of course we have JavaScript with its numerous possibilities to care for proper fallback solutions, but what if JavaScript is not an option? Keep calm and read on. We have a row of alternatives for you. Some of which mean even lesser effort than coming forth with a full-fledged JavaScript...

HTML and SVG Files

Modern browsers make no difference whether an image is in SVG, PNG or JPEG. Simply embed all of these using the „<img>“ element. An alternative is the „<svg>“ element to be more specific. Yet as older versions of IE know neither SVG as a format nor as an element they will simply ignore it. External SVGs are linked in via Xlink and the „<image>“ element. Curiously enough all non-SVG versions of IE will take the „<image>“ element as the similarly named „<img>“ element. As soon as we use the „src“ attribute to embed a JPEG, IE will display it. All browsers supporting SVG and the „<image>“ element properly will instead display the SVG file.

<svg width="100" height="100">
  <image xlink:href="logo.svg" src="logo.jpg" width="100" height="100" />
</svg>

In the above example we link in an external SVG per „<image>“ and the correct attribute „xlink:href“. The incorrectly set „src“ attribute will be ignored by all modern browsers. Only Internet Explorer from version 8 downwards will recognize it and display the JPEG alternative - incorrectly, but intentionally set by the designer. The trick works for inline SVG as well. Use the „<image>“ element, but omit the „xlink:href“ attribute.

<svg width="100" height="100">
  <path d="M5 1v14l9-7" fill="red" />
  <image src="logo.jpg" width="100" height="100" />
</svg>

In the above example we draw a red arrow as an SVG. Older versions of Internet Explorer will ignore that and display the JPEG from inside the „<image>“ element. Another working option to provide a proper fallback is by the use of the „<object>“ element, which is also able to embed an SVG into a document. Inside this object we'll use the „<img>“ element to provide the fallback file. Note that is important to not attach the correct MIME type „image/svg-xml“, but something incorrect such as „text/svg+xml“. This is mandatory to force the Internet Explorer to display the content of the „<img>“ element. Modern browser are tolerant enough to display the SVG regardless of the wrong MIME type.

<object data="test.svg" type="text/svg+xml">
  <img src="test.jpg">
</object>

CSS and SVG Files

Fallbacks for CSS work following the above mentioned principles. Only that we are going to use CSS properties the older IE is not able to understand. Say we want to display an SVG as a background we'd use the CSS3 method of embedding multiple backgrounds. On multiple backgrounds we will need to use the common „background-image“ property and, yes, you are right, older IE supports that too. Yet, the trick is, we add more than one file, comma delimited. IE 8 and below will take that as reason enough to ignore the property as a whole.

background-image: url("background.svg"), none;

In our example we define a background using multiple files. The second file is set to „none“. This is sufficient to make older browsers ignore the property completely. Then we go and define an additional „background-image“ property with just one image in JPEG and place it right before our multiple background definition. Older browsers will display the JPEG and ignore the second statement.

background-image: url("background.jpg");
background-image: url("background.svg"), none;

This is how it goes. Normally the first property would be interpreted by all browsers, but the first gets overwritten by the second as soon as a browser is able to recognize SVG correctly. Unfortunately this fallback method will not work for all properties embedding files via „url()“. Other than with „background-image“ „list-style-image“ does not provide any such possibility. There simply is no CSS3 variant that would be unsupported by older browsers.

Conclusion

In many cases we can establish simple fallbacks without JavaScript. On the downside we have to ditch standards compliance in some cases, such as giving the wrong MIME type. The advantage is that these solutions are quick to implement and will function without the need for JavaScripts such as Modernizr and others. It all depends on the project.... (dpe)