At work the development team was recently given an assignment to do some true R&D work to explore some technologies that we aren't currently utilizing within Aprimo Marketing. Of particular interest to management were .NET 2.0, XBRL, JSON, and Scalable Vector Graphics (SVG). Given these topics I decided to take a look at SVG. The more I experimented with SVG the more I kept asking myself "Why didn't I get interested in this three years ago?"
When reading this article please keep in mind that it has been written from a software engineer's perspective as opposed to a graphic designer's perspective. Both software engineers and graphic designers may benefit from the information presented here but the primary beneficiaries of the information will be software engineers.
What is SVG?
SVG is an XML based declarative language for building two-dimensional graphics. The current recommendation from the W3C is SVG 1.1 and SVG 1.2 is available as a draft. In addition to the full blown SVG language, SVG Basic and SVG Tiny are targeted towards lower power devices such as mobile phones. Furthermore, a standard scriptable DOM is available for dynamically building and manipulating SVG elements.
SVG Features and Advantages
SVG has many great features that make it a great solution for applications that require two-dimensional graphics. Foremost among the advantages of using SVG is the fact that it is an open XML-based standard so SVG documents may be manipulated using any editor that supports plain text as opposed to using proprietary software. The inclusion of a scriptable DOM makes dynamic manipulation of SVG documents easy and because SVG is XML based it is also easy to dynamically generate SVG documents from server processes. The declarative nature of SVG also makes reading documents fairly intuitive.
Finally, in some scenarios such as inside of Web applications using SVG may be able to provide a performance boost to the application by offloading the generation of the actual image from the server to the client. Consider the case of a reporting application that makes heavy use of dynamically generated graphs. Rather than dynamically create the actual image on the server and emit a JPG or GIF file to the client, the server may instead generate a plain text SVG document to sent to the client to render.
Some of the features supported by SVG include:
- Scaling
- Animation
- Filters
- Clipping, Masking, and Compositing
- Interactivity (via the scriptable DOM)
SVG Downfalls
As with any technology, there are some downfalls with SVG. Suprisingly, cross-browser support was fairly consistent in my tests. My tests showed support to be consistent enough across browsers to be able to build a functional SVG-based application (with AJAX support) with very little trouble but some inconsistencies (particularly with support for individual element attributes) that could be troublesome. A more important cross-browser downfall is that SVG is not natively supported by Internet Explorer. To enable SVG support in Internet Explorer, a plugin must be installed.
What I see as one of the biggest issues with SVG is a side-effect of it's strongest selling point. Because SVG is XML based file sizes can quickly get out of control. The W3C has done a pretty nice job trying to help alleviate the problem by using short element names when possible and also by trying to keep nearly all data about the elements contained within attributes but XML by its very nature is extremely verbose. To further complicate the problem, couple the verbose nature of XML with all of the JavaScript that may be needed for manipulating an SVG document and things can get ugly in a hurry.
Another major issue with SVG is the lack of built-in form controls. I understand that form processing is not the objective of SVG but for the W3C to include a scriptable DOM and not include built-in form controls seems strange. In my test application I needed to dynamically change some text (which is possible via the DOM) but had to resort to using JavaScript's prompt() function to obtain the new text when simply using a textbox would have been much more straight forward and intuitive.
SVG Implementations
At the time of this writing, SVG is slowly starting to catch on and support is becoming more widespread. Currently Opera 9 and Firefox 1.5 provide native support for SVG and a SVG Viewer plugin is available (free) from Adobe for Internet Explorer 6. During my experimentation I found the different implementations to function fairly consistently and only had a few minor issues to contend with. With few exceptions, even the DOM implementations operated as expected according to the W3 specification.
SVG Resources
The following resources are all sites that I found useful in my study of SVG. There are a number of samples and lots of great information contained within.