HTML and CSS Reference
In-Depth Information
Again Modernizr comes to our rescue! In our main.js file, we will check the out-
come of the SVG test in Modernizr and then replace all the SVG images with their
equivalent PNG ones. Do note that this means you need a PNG equivalent for every
SVG file you use in your HTML page. The code to replace SVG with PNG files is as
follows:
if(Modernizr.svg == false) {
$('img[src$=".svg"]').each(function() {
this.src = /(.*)\.svg$/
.exec(this.src)[1] + '.png';
});
}
Tip
Why use SVG?
We are using SVG icons as these can scale as per our needs of a responsive
website, as SVG is a vector image format. Moreover, they are extremely light-
weight compared to typical PNG files and can load significantly faster than PNG
formats.
The following screenshot shows how IE7 renders the icons in PNG format thanks to
Modernizr:
Search WWH ::




Custom Search