SVG is a powerful graphics format for the web. With its array of benefits, one would think using SVG should be a no-brainer. But this is not the case. Even though SVG was introduced since 1999, it has only been widely used in the past recent years. Many people don’t know or use SVG, and some old browsers do not support it. According to caniuse.com, about 5% of internet users surf the web with the browser that doesn’t support SVG. So by using the SVG format, you risk missing out on 1 in 20 users who could be viewing your graphic. Because of the limitations of SVG, you may want to implement SVG fallback support.
SVG works in all modern browsers updated in the last 2 years. However, old browsers like IE8 and below do not support SVG. We should, therefore, provide SVG fallback support. We may decide to display an alternative text or another image format (for example, SVG with PNG fallback) to accommodate SVG-unsupported formats.
When should you implement SVG fallback support?
Is fallback really necessary? What’s all the hassle for? Instead of implementing a fallback, we could always prompt the user to update their browser or use a modern browser, right? This could work. But this is hardly convenient for the user. SVG fallbacks can range from background images to alternative image formats. Each method comes with its pros and cons. Here are some circumstances where you should consider SVG fallback support:
- When a notable amount of a website’s visitors are using a browser or device that doesn’t support SVG. By looking at your website’s analytics, you may be able to see the browsers/devices used by visitors. From there, you can deduce the economic benefits of implementing an SVG fallback mechanism. If you don’t have users visiting from an SVG-unsupported browser, it will make sense not to have a fallback plan.
- When the SVG content warrants a fallback. Not all SVG content requires a fallback image. When the SVG content is simply a text label, you may simply use an alt tag with the text and add background styling with CSS. This is quicker and simpler than having an image fallback.
- When you have a process to easily produce and display alternative formats. If you can automate the SVG fallback process instead of plugging in other image formats manually, why not do it?
Types of SVG fallbacks
Once you have decided to implement a fallback solution, there are several types to choose from.
1. No direct fallback
When the SVG content can be made visible without the SVG image, then we need not set a fallback. For example, a text label SVG image could be made to have an alt tag carrying the text in the label.
<img src="image.svg" alt="an image" >
2. Interactive fallback:
This type of fallback is relevant when you have an interactive SVG file. It is complicated to implement and involves writing code using a JavaScript library such as Raphaël. Alternatively, you may convert the SVG to Flash and then rewrite the interaction code in ActionScript.
3. SVG fallback text
If the user can’t view an icon or image, the least we can do is describe the graphic to them. We do this using the <img> element alt attribute.
<img src="image.svg" alt="A cool image of a dog wearing sunglasses" >
4. SVG Image fallback
When we can’t display the SVG format, we could revert to a PNG, JPG, or GIF image format. The downside of the method is there is an increase in image sizes and a decrease in resolution.
How to set a fallback image
When SVG isn’t supported by some browsers, an option is to replace the SVG image with a standard image format equivalent. For example, an SVG image with PNG fallback.
a. HTML5 image fallback
We can set a fallback image in HTML. Using the <picture> tag in our HTML code, we can swap out the SVG image for the PNG.
<picture> <source type="image/svg+xml" srcset="image.svg"> <img src="image.png" alt="an image"> </picture>
In addition, we could use the <object> or <embed> tags to add SVG images. While this method is ideal for older browsers like IE8 and below that do not support SVG natively, it is redundant for modern browsers. This is because almost all modern browsers support SVG, making it better to use the <img> tag.
<object type="image/svg+xml" data="image.svg">
<img src="image.png" alt="An image">
</object>The child element of the <object> (in the case, the text in the <p> tag) will be displayed if the object fails to display:
<object type="image/svg+xml" data="image.svg">
<p>
Your browser doesn't support SVG! Sorry :(
</p>
</object>b. Fallback image in CSS3 (Background image fallback with CSS)
Instead of displaying SVGs as images using the HTML <img> tag, we may use CSS. The caveat to using CSS is we can only display the CSS fallback image as a background image. We shall use two CSS declarations with the background property and the CSS url() function. One URL links to the SVG image and the other links to the fallback of another format (such as PNG). CSS’s error handling mechanism will display the SVG when possible and revert to the alternative format on older/unsupported browsers.
body {
background: url(image.png);
background: url(image.svg), linear-gradient(
transparent, transparent);
}
From the above code: Modern browsers that support multiple backgrounds also support SVG and will use the last CSS declaration (displaying the SVG image). Browsers that only support a single background will ignore the 2nd declaration and use the first (displaying the PNG image).
c. Fallback image JavaScript
Alternatively, we may use set an SVG fallback image using Javascript. While the JS code is shorter, it can be problematic as we trigger several unnecessary requests for unsupported images. Additionally, you will have to use other workarounds to ensure the images are displayed at a correct scale on-screen.
<img src="cool-img.svg" onerror="this.src='cool-img.png'; this.onerror=null;">
Adding SVG inline fallback
Many people prefer to add their SVG code inline with other HTML code, like so:
<html>
<body>
<h1> A circle drawn with SVG </h1>
<svg>
<circle fill="red" r="50" />
<path stroke="blue" ... />
</svg>
</body>
</html>
The beauty of inline SVG is the beauty of its flexibility, letting us style and modify the graphics using CSS and JavsScript.
Browsers can’t simply ignore SVG/XML content and treat them as HTML if it doesn’t support the format. How then do we offer inline SVG fallback support? Since image fallback with inline SVG is hardly an option, we can revert to text fallback. We may add some text at the start of the SVG code, inside the <svg> tag. When the SVG format is unsupported, the rest of the code will be ignored, displaying only the plain text written at the beginning.
<svg> <!--Text fallback below--> Your browser doesn't support SVG images. Sorry :( <circle fill="red" r="50" /> <path stroke="blue" ... /> </svg>
SVG has the <text> element that draws a graphics element consisting of text. Any text between the <text> tag will not be displayed by older browsers that do not support SVG. So, even when using the <text> element, you should add plain text as a fallback.
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<!--Text fallback below-->
Your browser doesn't support SVG images. Sorry :(
<text x="20" y="35" class="small">Hello</text>
<text x="40" y="35" class="heavy">World</text>
</svg>SVG icons fallback
The SVG format is used extensively by a lot of developers to display icons on the web. Their small size and scalability make them ideal for icons. We should explore how to provide fallback support for icons. The same fallback methods used for images apply here, as well as additional SVG icons fallback options.
- Instead of using a plain CSS background as fallback support, we may use CSS sprites.
- Alternatively, we may abandon our custom icon and use an icon font instead. There is more support for @font-face on older browsers than there is for SVG. Some good icon fonts include Font Awesome, Ionicons, and Devicons.
- Finally, we may resort to a tool like Grunticon to automate the SVG icons fallback process. Grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. Grunticon, using JS tests, starts with an empty element and progresses up to SVG, while handling fallbacks.