While overall support for SVG on the global web (https://caniuse.com/#search=svg) is now very high, it's not uniform and there are still non-supporting browsers out there. This is where Modernizr, the feature detection library, can be useful. If your user base is broad or you're using newer (even experimental) features, you can use Modernizr to detect browser compatibility with your important features and adjust your code accordingly.
There are two ways this works. One is the classes that Modernizr can place on the HTML element. The other is the global Modernizr object that contains results for all the tests as Booleans. Before we move on, I'll show you examples of both tools in action.
The Modernizr project provides hundreds of tests. Since some of the tests are quite expensive (in terms of resources needed to compute, when working with Modernizr, you want to use just the tests you need for your application. In this case, I've created a specific build of Modernizr that tests for multiple SVG features and nothing else. When added to an HTML page, this file will add classes to the HTML element indicating support for various SVG features
Here's the output of the HTML element in Microsoft Edge. The no-smil class indicates that Edge doesn't support Synchronized Multimedia Integration Language (SMIL), but does support everything else we're testing for:
<html class=" svg svgclippaths svgforeignobject svgfilters no-smil inlinesvg svgasimg" lang="en">
Output from the latest Chrome Version indicates support for all tested features:
<htmlclass=" svg svgclippaths svgforeignobject svgfilters smil inlinesvg svgasimg" lang="en" >
And finally, Internet Explorer 8 (IE8), which has no SVG support at all:
<HTML class=" no-svg no-svgclippaths no-svgforeignobject no-svgfilters no-smil no-inlinesvg no-svgasimg" lang="en">
Using these classes would allow you to, as a simple example, provide a PNG fallback function for CSS background images in IE8:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mastering SVG- Modernizr</title>
<style type="text/css">
.header {
color: #ffffff;
background: url(1-3-gradient.svg) repeat-x;
width: 500px;
height: 40px;
text-align: center;
}
.no-svg .header {
background: url(1-3-gradient.png) repeat-x;
}
</style>
</head>
<body>
<div class="header"><h1>CSS!</h1></div>
</body>
</html>As was mentioned, Modernizr also exposes a global Modernizr JavaScript object with each of the tests available as a Boolean. The following example shows how to access that Boolean and using an if statement for the code approximately, depending on whether or not SVG is supported:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mastering SVG- Monderizr JavaScript Object</title>
<script src="modernizr-custom.js"></script>
</head>
<body>
<script>
if (Modernizr.svg){
// do things with SVG
} else {
//create a non-SVG fallback
}
</script>
</body>
</html>In general, the rest of this book will not focus on fallbacks for older browsers, but it is useful to know that they're available if you're working in an environment where you need to support a broad range of browsers and devices.