SVG Image and Background Image Replacer

It’s here! A working version of the SVG image replacement script.

• Demo page
• The script

Purpose

This script substitutes specified images and background images with SVG images for web browsers that support them. This makes it perfect for anyone who would like to start using SVG for their site design, but wants to make sure it will look okay for browsers that do not yet support it.

Features

• Future-proof – Checks for actual support, no browser sniffing
• Unobtrusive – Only affects browsers with support, uses fallback content without support or if javascript is disabled
• Simple to use – Just include one javascript file to your pages and use the appropriate image names
• Small file – Only 1.8 KB!

Usage

1. Make sure you have matching SVG and fallback images.
2. Rename your fallback images in this format: “filename.svg.jpg” for “filename.svg”. Note that any image type can be used as alternative (jpg, png, gif, etc).
3. Make sure your file names are correct in you HTML and CSS files
4. Add the script inside your HEAD element like this:
   <script type=”text/javascript” src=”svgreplace2.js”></script>
   and of course upload the script to your server.
5. If you already have a script with an onload event, you can remove that line in the script, then just call SvgReplace(); where it needs to load. Note that the script will also work when the DOM is loaded, so it should work fine (actually better, since the images will be replaced faster) if you if you want to call it then.

How it works

First, the script checks if the browser recognizes SVG files as images. It does this by loading a small data URI SVG file, then checks if it loads properly and if it returns it’s width. When true, it looks through all CSS rules, and replaces image background names that contain ‘.svg’. Then it does the same for all images that appear in the HTML.

Browsers tested

To make sure the script will work for future browsers, the script was rewritten to check support for PNG files. The following browsers were able to check for this support and replace the images successfully. When tested for SVG image support, all displayed the fallback images as expected.

• Opera 9.2
• Firefox 2
• Safari 1.2
• Safari 3
• Internet Explorer 6
• Internet Explorer 7

Opera 9.5 beta 1 and two different developer snapshot builds were used to test the SVG support, which also works as expected. This leaves the following browsers that should successfully replace specified images with their SVG counterparts:

• Opera 9.5 alpha / beta 1
• Wii Internet Channel

As for support by other browsers…

Webkit (Safari) apparently supported SVG as images in its nightly builds for a while, but the feature was disabled for stability reasons. Hopefully they’ll manage to stabilize it soon, in which case it should appear in an upcoming release of Safari in the near future. See bug report

Gecko (Firefox) has the feature reported as a bug, both for images as well as CSS backgrounds. Unfortunately, no priority or target milestone has been set for either, though quite a few people have voted for them. So it might be while before we see any support there.

Internet Explorer does not support SVG natively at all right now, and the only thing we know for future support comes from this comment by IE Platform Architect Chris Wilson: “I think SVG is gaining momentum as part of the interoperable web standards platform, and as such I expect we will add support for it in the future”. Who knows, maybe they’ll support SVG as images when they get to it?

Notes

• While other browsers do support SVG files using the “embed” or “object” elements, this script currently only checks for support as “img” elements and CSS background images.
• Theoretically a future browser might support SVG as images, but not as CSS backgrounds, or vice-versa. I’ve been unable to find a way to differentiate these different supports, so the script will just assume support for both if support for “img” elements is found.
• As mentioned, a data URI file is used to check support. This was done to eliminate the need for an additional file. All modern browser support data URIs, except for Internet Explorer. Then again, all modern browsers support SVG to some degree, while IE does not. Hopefully by the time IE supports SVG and SVG as images/css backgrounds, it will also support data URIs. If you don’t expect this to be the case, you can play it safe by using an external SVG file instead. Just change the “testImg” value to the location of a small SVG file.
• Opera 9.5 appears to have a strange bug where it occasionally gets unhappy when you try to use the same SVG image as both a CSS background as well as a regular image. Doing so using this script may make Opera use the fallback image, or worse, hide the background entirely.