Displaying and detecting support for SVG images

This article shows an easy approach for detecting SVG browser support and shows two code examples how to display SVG images on a website.

comparison of bitmap and vector images

SVG is a resolution independent format for graphics on the web. The technique has been around for a while but not widely used as it was not supported by all browsers. With the introduction of high resolution displays and support by major browsers it is really making a comeback. The new Voormedia website released in July 2012 relies heavily on SVG images. This article demonstrates how we went about with browser detection and displaying these images on the site.

Detecting SVG support

We like to detect browser support so we can show a fallback image for unsupported browsers. We are interested in support for SVG images in <img> elements and as CSS background images. Ideally, detection only requires a small bit of JavaScript code. We can insert this directly in the head section of our page to avoid include files, page flickering and flashes of unstyled content.

There are various JavaScript solutions for testing browser support for SVG. We looked at three different methods. One solution is to reference the window.SVGSVGElement object to check for browser support. Another technique is to use Modernizr. Modernizr is a feature detection library that detects SVG support through the document.createElementNS command. The third technique is to test the browser for SVG 1.0 and SVG 1.1 features using document.implementation.hasFeature.

The table below lists these types of JavaScript detection for different browsers. The first two rows show actual support by each browser. The rows underneath show the results of JavaScript detection. Click on "expand table" to show the entire comparison table.

We inspected the table and compared actual browser support with JavaScript detection. It became clear that feature detection using document.implementation.hasFeature for SVG11/feature#Image gives the most accurate information of the capability of the browser to display SVG.

The resulting JavaScript turns out very nice. It requires only a small piece of code that can be inserted in the head of our web page. Using this we can set an extra class on the html element with supported browsers and use CSS to display a different image.

The JavaScript code to do this looks like this:

if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
  document.documentElement.className = "svg";
}

The technique of setting a class on the html element is similar to detecting whether JavaScript is enabled as demonstrated in this article by Paul Irish.

Adding SVG images

Now that we have found an accurate means of detecting SVG support we can start inserting images on our website. Below are two different examples of the code you can use.

Inline image example

SVG images can be included on a web page using the img element with the following code.

<html>
  <head>
    <script>
if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
  document.documentElement.className = "svg";
}
    </script>
    <style>
      img { width: 18.75em; height: 6.25em; }
      img.svg { display: none; }
      img.png { display: inline; }
      html.svg img.svg { display: inline; }
      html.svg img.png { display: none; }
    </style>
  </head>
  <body>
    <img class="svg" src="http://voormedia.com/examples/svg.svg" alt="SVG image">
    <img class="png" src="http://voormedia.com/examples/png.png" alt="Fallback image">
  </body>
</html>

The result of the code with inline SVG images is shown below. You will see an SVG image if your browser supports SVG.

SVG image Fallback image

SVG background example

SVG backgrounds behave very similar to inline images. Here is another example that shows how background SVG images can be added to the web page. Notice that we set the background size as well for proper scaling in combination with em units.

<html>
  <head>
    <script>
if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
  document.documentElement.className = "svg";
}
    </script>
    <style>
      div.example {
        background-image: url("http://voormedia.com/examples/png-background.png");
        width: 29.5em;
        height: 6.25em;
        background-size: 29.5em 6.25em;
        /* FF3.6 PNG */ -moz-background-size: 29.5em 6.25em;
        /* Safari 3-4 */ -webkit-background-size: 29.5em 6.25em;
      }
      html.svg div.example {
        background-image: url("http://voormedia.com/examples/svg-background.svg");
      }
    </style>
  </head>
  <body>
    <div class="example"></div>
  </body>
</html>

The result of the code with an SVG background image is shown below. You will see an SVG image if your browser supports SVG.

 

Enjoy!