SVG: What's Missing on the Web

You can be forgiven for never having heard of SVG, or scalable vector graphics, even though they've been in development since 1999 and in release since 2001. In short, SVG is an open standard XML file format that graphical and web developers can use to describe graphical constructs like lines, polygons, circles and other shapes, along with their characteristics. Since it is fully extensible, future SVG standards will include more powerful video capabilities. SVG received broad support throughout the web development community, but for reasons that can only be guessed at, Microsoft never included the capability to display these files in its market-dominating Internet Explorer browser, putting web developers in the difficult bind of whether to bother utilizing a format that the vast majority of web users wouldn't be able to view without a special plugin.

Why SVG?

SVG is a superior file format for displaying graphics on the web for several reasons. First and foremost, it's an open standard that can be utilized by any party without restrictions of any kind. In addition, SVG files are generally smaller than JPEG files or other similar formats. This makes SVG a particularly efficient format for use by mobile devices, such as the iPhone, which have the capability of displaying SVG files without a third-party add-in. The SVG standard is also backward compatible, meaning if a future version of the standard is released that an SVG rendering application doesn't support, it will simply render what it can and ignore the rest. Marketers will be able to take advantage of SVG's format to more easily index images and optimize them for search engine placement. Vendors of assistive technologies such as screen-readers may be able to utilize SVG to give their users a better understanding of the screen and its layout.

The Microsoft Effect

With all those positives, you may be wondering why Microsoft seems so reticent regarding integrating SVG capability into Internet Explorer. The general consensus, accurate or not, seems to be that Microsoft was hoping that its Silverlight technology would ultimately supersede SVG. Although Silverlight has come a long way in multimedia applications, for simple vector graphics, developers would still prefer something simple but extensible like SVG. In fact, a member of Microsoft's team has now been accepted to the W3C's SVG working group. He is now a member in good standing, and developers are hoping this bodes well for SVG in IE 9. The company has had no comment on the matter, neither now nor over the past nine years as SVG was passed over for inclusion in their flagship browser again and again.

Working Around the Giant

Microsoft's stubborn reticence to adopt SVG forced developers to find other ways of bringing that functionality to their sites. They did this through Internet Explorer plugins, web protocols and Javascript libraries.

Almost immediately after SVG was released in 2001, developers began coding plugins for IE 6 that would display SVG files in the browser. Of course, a webmaster trying to sell a product or otherwise compel the user to take some kind of action doesn't' want a plugin getting in their way, so this was a non-starter for most sites. The plugins work well enough, however, and include adobe SVG viewer, RENESIS Player, Google Chrome Frame and Corel SVG. Although users download plugins every day, most notably Flash, the web development community continued to search for a more elegant solution.

One such solution is for the webmaster to use content negotiation. A succinct description for this protocol would be: ''give the browser what it wants.'' The browser communicates to the server which media formats it can handle and a quality rating for each. The server can then decide which content to serve the client. On its face, this sounds like a workable system, but it has two related disadvantages. The primary one is that if you're going to set up a site to use content negotiation, you're obviously going to need at least two versions of the content. In turn, this creates headaches for the webmaster. Keeping this content exactly in synch is a tedious job, although it's not as bad if the images on the site are static and won't be changing frequently. So although content negotiation can be a simple, effective solution for some sites, for others it would obviously be impractical.

This brings us to the most workable solution, that of cross-browser libraries - Javascript libraries that allow the developer to customize SVG widgets and run them on any browser using Javascript. Since all modern browsers support Javascript, vector graphics can be displayed in the browser without the need for additional steps on the server side, such as employing content negotiation, or the client side, such as downloading a browser plugin. These libraries offer the developer a convenient way to create custom sites with little effort, and because they use Javascript, only one version of the site needs to be maintained. The exception is if the webmaster wants to display content to browsers that aren't running Javascript, such as text-based browsers like Lynx and some mobile devices. Since this is a tiny percentage of the browser market, most sites don't bother.

The Lure of Libraries

Some of the leading cross-browser libraries include Ample SDK, Raphaël, and SVG Web. All contain tools for displaying graphics using SVG, but each of them is best suited for different SVG-related functions, whether its simple SVG rendering, advanced application development or multimedia integration.

Raphaël is a simple, compact library that is perfect for the developer who doesn't need anything fancy, but just wants to display SVG graphics on a page. It uses VML, present in all graphical browsers, to render each graphic. As with all such libraries, graphics created with Raphaël are also DOM objects, allowing you to manipulate them using Javascript event. In short, Raphaël sticks to the basics and does them well.

The Ample SDK is a powerful, versatile and extensible SDK that purports to be a one-stop solution for advanced web application development. Utilizing open standards including SVG, it allows developers to start writing code immediately without learning any proprietary modules. The SDK has just recently switched to open-source licensing, as of November 1, 2009. Ample focuses on the core elements of a modern web application rather than multimedia rendering. However, its extensible nature allows authors to add any components they like to the core of the SDK.

SVG Web is an open source SDK that combines the use of SVG and Flash to give developers several powerful tools for rendering graphics, audio, video and animation. All rendering is done using Flash, which is installed on 90% of current browsers. SVG Web allows you to embed SVG content directly using HTML 5 or by means of a DOM. Although relatively early in its development, its primary focus seems to be on quickly and easily creating embedded video, audio or animation on a page.

Where Does SVG Go From Here?

SVG has been in general release for over nine years. Thanks to exclusion by Microsoft, it never was able to take off as a common graphics file format. Although it is an open standard and is extensible, it may be too late for SVG to make a comeback as a widely adopted multimedia solution. The saturation of Flash and rapid adoption of Silverlight for multimedia uses would seem to preclude SVG from getting a foothold.

However, SVG is far from obsolete. It still handles vector graphics better than any comparable standard. The proliferation of mobile devices that support SVG ensures that developers will be able to use it directly and in combination with cross-browser libraries to bring SVG content to over 95% of the browser community. Indeed, the mobile sector may provide a second life for this versatile format, as mobile applications become more complex while bandwidth remains relatively narrow. These are ideal circumstances for SVG to gain wide adoption.

The web is wondering whether Microsoft will dare to include SVG rendering in IE 9. Whether they do or not, cross-browser libraries and steadily increasing usage in the mobile arena will keep SVG at the forefront of graphical standards on the web for some time to come.

Author:
Borko Simms is contributing author at WebmasterFormat.com, place where webmasters can find useful tips, latest news and help in finding the appropriate hosting service