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.
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.
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:
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!
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.