Detecting the SVG Viewer

Published on 2003-07-27 by John Collins.

Follow @TechLeaderPro

In a previous article on SVG (Scalable Vector Graphics), I showed how you could draw some basic shapes in SVG. However, before I go any further in SVG, I must first discuss the main issue which inhibits you from deploying SVG on your site at present, namely how do you know if the user visiting your site has SVG support enabled on their browser?

To date, only Mozilla provides native support to SVG, and even at that it is only a sub-set of SVG, not the full specification as laid out by the W3C. In reality, most people coming to your site with SVG support will be using the Adobe SVG Viewer for Internet Explorer (at version 3.0 as of writing). So armed with this knowledge, how do you present SVG content to such users, while also providing alternative non-SVG content to the majority of Net users that do not have SVG support? To do this, we will have to use a detection script to try to detect the presence of the Adobe SVG plug-in.

The Detection Script

Full credit for this script must go to Ana Lindstrom-Tamer of Sun Microsystems, who originally published this script on the Sun site in this article. That I am aware of, it is the only method for determining SVG support. The version I present here is a modification of the original, which generates dynamic content on the same page, rather than a browser redirect as in the original. The logic in this script is really quite intuitive and easy to follow.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SVG Detection Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
 
<div id="logo"></div>
 
<script language="JavaScript">
// Boolean variable to keep track of user's SVG support
var hasSVGSupport = false;
 
// Boolean to determine if we need to use VB Script method or not to find SVG support
var useVBMethod = false;
 
/* Internet Explorer returns 0 as the number of MIME types,
   so this code will not be executed by it. This is our indication
  to use VBScript to detect SVG support.  */ 
if (navigator.mimeTypes != null && navigator.mimeTypes.length > 0) {
    if (navigator.mimeTypes["image/svg-xml"] != null)
        hasSVGSupport = true;
}else{
    useVBMethod = true;
}
</script>
 
<script language="VBScript">
' VB Script method to detect SVG viewer in IE
' this will not be run by browsers with no support for VB Script
On Error Resume Next
If useVBMethod = true Then
    hasSVGSupport = IsObject(CreateObject("Adobe.SVGCtl"))
End If
</script>
 
<script language="JavaScript">
// tailored output for SVG and non-SVG users.
if (hasSVGSupport == true) {
// use the innerHTML method of the DOM to write in dynamic content to the logo layer
  document.getElementById('logo').innerHTML = '<embed width="466" height="90"'+
  'src="../images/logo.svgz" pluginspage="http://www.adobe.com/svg/viewer/install/">';
}else{
// Alternative output for a user with no SVG support
  document.getElementById('logo').innerHTML = '<img src="../images/logo.gif" width="466"'+
  'height="90">';
}
</script>
 
</body>
</html>

The code begins by setting a Boolean-type variable hasSVGSupport to keep track of SVG in the client browser, and initializes it to false. Next, useVBMethod is used to determine whether the VB Script is required or not, i.e. for Internet Explorer-based browsers only. We then check for the array of MIME objects, and if it exists then does that list have more than zero items. If both conditions are true, we check for the specific SVG MIME type, namely image/svg-xml. If it is found we know SVG is supported. If the conditions are not true, then useVBMethod is changed to indicate that the VBScript must be used.

The VB Script method is then called in Internet Explorer, which tries to create an Adobe SVG object. If this is successful (and returns true), then we know that the SVG plug in is installed. All that is called for now is to show a demo of this method:

Demo of the Above Code

A Word About SVG Compression

If you are wondering why the file extension for the logo SVG file is '.svgz' and not '.svg', this is because it uses the compressed format of SVG. In fact, the SVG logo for this site that I created using Adobe Illustrator 10 is only 2.7 kilobytes, while the gif equivalent of the same logo is 11.6 kilobytes!

The Advantages of this Method.

As you can tell from the above demonstration, if you have the Adobe SVG viewer installed, you get the logo in all of it's SVG glory, otherwise you get the gif version of the logo. As this is a scalable web site, the one element of the site that never scaled gracefully with the rest of the CSS-based interface was the logo. At resolutions higher or lower than 1024x768, the logo in gif format gets a bit rough around the edges. In the SVG equivalent, it scales beautifully to ANY resolution.

Even Adobe admit themselves, however, that SVG support is still in it's infancy. So it seems that we developers will still have to rely on such methods as the one presented above to check for SVG support, if we want to join the minority of web sites that possess any SVG content whatsoever. With SVG being a W3C specification, however, and with the commercial weight of Adobe behind it, we can only hope that this situation improves in the future.

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2003, but is left here for archival purposes. Thankfully most modern browsers now support SVG natively, and the Adobe SVG plugin is no longer required or supported.