A Graceful Fallback for SVGs in Old IE

Share this article

There are plenty of good reasons to use SVGs instead of rasterized images. The benefits include better image quality, image flexibility, and smaller file size. But one obstacle you might still face is browser support. SVGs are supported by all modern browsers except IE8 and below.

In the following sections I’ll outline how you can handle this in a graceful way by falling back to PNGs for older browsers. This will address both inline SVGs and background images.

Produce your Fallback Images

The first step is to produce a PNG version for each of your SVGs. You could do this with your preferred image editing software, but that could be a slow process if you have a lot of SVGs. Alternatively, you can use Grunt and a Grunt module called svg2png. This is the solution I will be describing in the following steps.

If you’re not familiar with Grunt, I recommend you read through this getting started guide. Otherwise, you can make a start by preparing a Grunt project and then running the following command:

npm install grunt-svg2png --save-dev`

Configure Your Grunt File

Configure your Grunt file with the following additions:

grunt.loadNpmTasks('grunt-svg2png');

grunt.initConfig({
    svg2png: {
        all: {
            files: [
                { cwd: 'img/', src: ['**/*.svg'], dest: 'img/png/' }
            ]
        }
    }
});

Make sure to point the cwd property to the directory containing your SVGs. Once that’s done, run grunt svg2png and you should now have a folder full of PNG versions of your SVG files.

Handling Inline SVGs

If you are using SVGs as inline images, the most robust fallback is to add an inline onerror event to the image tag like this:

<img src="/img/image.svg" onerror="this.src='/img/image.png';this.onerror=null;">

This will swap out the SVG for the PNG image if the SVG fails to load. I’ve also added an extra bit at the end: this.onerror=null;. This is to stop the event from firing again, which could happen if there was an issue with the path of the PNG. This would then cause an infinite loop of event calls, which is obviously best avoided.

You may be wondering why I’m suggesting an inline event here rather than a less obtrusive approach of attaching an event in a separate JavaScript file. This is because a jQuery approach of $("img").on("error", handler); won’t work in IE8 and lower because of timing issues, and the other alternative of looping through all images and attaching an error event to them would be a drain on resources for all browsers unless you just targeted older ones.

Handling SVGs as Backgrounds

If you are using SVGs as background images in your CSS then there’s a simple way to fall back to PNGs. The support for SVG is roughly in line with support for multiple background images. This means you can use a pure CSS solution, and so the following declarations are all you need:

background: url('/img/image.png') no-repeat;
background: none,
            url('/img/image.svg') no-repeat;

Here we are setting a PNG as the background but then overriding it with an SVG for browsers that are able to support multiple backgrounds on the second line.

IE8 and lower will view the second declaration as an error, so it will ignore the entire line, using only the first background.

Conclusion

That’s all there is to it. Now I hope going forward you’ll use SVGs even in projects that still require support for older versions of IE. This means you’ll be safe in the knowledge that they can gracefully degrade to PNGs if needed.

If you have some other automated solution for dealing with SVGs in IE8 and below, I’d love to hear about it.

Frequently Asked Questions about SVGs and Old IE

What is SVG and why is it important?

SVG stands for Scalable Vector Graphics. It is a type of graphic format, based on XML, and is used to display a variety of graphics on the web and other environments. Since SVGs are scalable, they can be adjusted to different sizes without losing any quality. This makes them ideal for use in responsive web design.

Why doesn’t Internet Explorer 8 support SVGs?

Internet Explorer 8 and below versions do not support SVGs because these versions were released before the SVG format was widely adopted as a standard for web graphics. At the time, Internet Explorer was using a different technology, called VML, for vector graphics.

How can I make SVGs work on Internet Explorer 8 and below?

There are several ways to provide fallbacks for SVGs in Internet Explorer 8 and below. One common method is to use a library like Modernizr to detect SVG support and provide a fallback PNG image if SVG is not supported. Another method is to use conditional comments to serve a different stylesheet to Internet Explorer 8 and below.

What are the benefits of using SVGs over other image formats?

SVGs have several advantages over other image formats. They are scalable, meaning they can be resized without losing quality. They are also typically smaller in file size than other image formats, which can help to improve load times and performance. Additionally, SVGs can be styled and manipulated with CSS and JavaScript, providing more flexibility and control than other image formats.

Can I use SVGs in HTML5?

Yes, SVGs can be used directly in HTML5. They can be included inline in your HTML code, or referenced as an external file using the tag or as a background image in CSS.

How can I convert SVGs to PNG format?

There are many online tools available that can convert SVGs to PNG format. These tools typically allow you to upload your SVG file, specify the desired output size, and then download the resulting PNG.

Are there any drawbacks to using SVGs?

While SVGs have many advantages, they also have a few potential drawbacks. One is that they are not supported by all web browsers, particularly older versions. Additionally, SVGs can be more complex to work with than other image formats, particularly for those unfamiliar with XML and graphic design.

What is the future of SVGs in web design?

The use of SVGs in web design is likely to continue to grow in the future. As browser support continues to improve, and as more designers and developers become familiar with the benefits of SVGs, it is likely that their use will become even more widespread.

How can I learn more about SVGs?

There are many resources available for learning more about SVGs. The W3C, which is the organization that sets standards for web technologies, has extensive documentation on SVGs. There are also many tutorials and articles available online.

Can SVGs be animated?

Yes, SVGs can be animated using CSS or JavaScript. This allows for a wide range of effects, from simple transitions to complex animations.

Luke HaasLuke Haas
View Author

Luke Haas is a front-end web developer based in London with particular interests in responsive development, JavaScript, and optimization.

GruntLouisL
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week