From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Make SVG background images backward compatible

Make SVG background images backward compatible

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Make SVG background images backward compatible

“

- [Voiceover] In the previous movie, I applied an SVG as a background image using CSS, and this will work great across all modern browsers; however, for older browsers, this will just result in no background image being displayed. Now you can solve this by using some fancy JavaScript library that goes in and swaps this all out, and it will work fine, but there's actually a much easier way of solving this problem. And it consists of cheating. I really like cheating, 'cause cheating usually solves problems in a very clean and simple way that's easy to manage. In this case, we're going to exploit a loophole between older and newer browsers. So what I'm going to do is define the background image twice. First, I'll set up this background rule to point out the png. So this will work for all browsers, both old and new. Then, I'll set up an additional property here for background image. And in this property, I'll point at icons/misc/tag.svg. Now if you're familiar with CSS, you know what…

Contents