For robust browser feature detection, Modernizr is an exceptional tool with which you can specify which tests are included in the library download. But what about those times when you only need a single, simple non-critical feature test? You can write the test yourself.

On a recent website project, I needed to display a logo on the page. Typically, I'd upload the logo to the page as a JPG or PNG file (depending on the logo's nature). A common task for a web developer.

JPG and PNG = blurry on iOS, SVG Crisp and Clear

PNG and JPG images while robust appear blurry on retina screens i.e. iPhone, iPad etc. There are fixes, such as increasing the image's size and resolution, but I think there is a more scalable way.

Displaying an SVG (Scalable Vector Graphics) of the logo on the site looked great across all my modern desktop browsers on my iOS devices. I did run into the challenge of older older versions of Internet Explorer not supporting SVG though.

The fix to this I can simply swap the src path to the SVG image inside the <img src="..." /> tag, with the src path to the PNG fallback- but we only want to do this swap for browsers that don't support SVG.

Testing for support, and switching where appropriate

// If the tested feature is NOT supported...
if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
    // Find all image tags referencing SVG images...
    $('img[src*="svg"]').attr('src', function () {
        // Swap the source out with the updated reference to the PNG file.
         return $(this).attr('src').replace('.svg', '.png');
    });
}
// Note: The SVG and PNG file names must be the same for the above code to work, since it only replaces the file extension.

The key to the above code, is the actual test line:

 document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1") 

The above line of code returns true if the tested feature is supported in your browser, and false if it is not. The code checks that the browser supports the feature you specify which is pre-defined on the W3 website (URL to spec and version number).

How does this test compare to Modernizr?

This test will be fine for any basic tests you need to run. In fact, this test is all SVGeezy runs. CSS Tricks do a nice job of explaining further how Modernizr tests for SVG support, but essentially they go about it a bit differently.

If your web site depends on SVG working correctly, then you should test to see whether the code example above works correctly, and if not, consider using Modernizr. Otherwise, if you only need basic feature detection, you now know how to do this yourself in a single line of vanilla-no-library-needed JavaScript.

The Final Result

• An SVG image is displayed as a logo on the page.
• JavaScript runs a feature detection test.
• If SVG is not supported, it swaps the image out with the PNG alternative.
• If SVG is supported, it simply does nothing and allows the page to continue loading.

But wait, there's more!

I built a little tool to test browser feature detection support, and display the results to the user.

It is incredibly simple and basic for now, however you can very easily extend it yourself to test for additional features. I've uploaded the code and result to JSFiddle for you to look at, which you can see below.