SVG - Should we be excited?
If you are excited by the idea of Flash, then you are going to love SVG. If you haven't heard of SVG, it's about time you did. Think Photoshop meets Flash meets XML. SVG or Scalable Vector Graphics is an open standard language proposed by the W3C for describing two-dimensional graphics in XML.
The W3C candidate recommendation documentation for SVG describes SVG as capable of rendering vector graphic shapes, images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.
The full power of SVG graphics lies in its ability to be interactive and dynamic. Animation effects can be defined and triggered via scripting. Being written in XML makes it is possible to generate nice charts and graphs on the fly from data pulled off an XML repository.
It is important to understand that what makes SVG special is that all this is possible without any graphic files at all. It is all just codes and instructions in text.
Who's behind SVG?
The W3C SVG Working Group released the SVG specification as a candidate recommendation in early August. This is a major milestone as it is the final step before the format is implemented in browsers and XML viewers.
The SVG Working Group boasts of an impressive list of key players in the web industry like Adobe, Apple, Autodesk, BitFlash, Canon, Corel, HP, IBM, ILOG, INSO, Kodak, Lexica, Macromedia, Microsoft, Netscape, OASIS, Opera, Quark, RAL (CCLRC), Sun, Visio, Xerox and staff from the W3C.
Adobe Systems have been the primary champion for the SVG format and have an extensive section on their website dedicated to SVG. Macromedia, though involved in the Working Group, seem less enthusiastic in comparison, as SVG may soon prove to be a threat to the Flash format.
More information on the official Scalable Vector Graphics (SVG) 1.0 Specification is available from:
http://www.w3.org/TR/SVG/
Characteristics of SVG
Outlining the characteristics of SVG will soon make clear its strengths and advantages.
Graphical Objects
SVG supports three types of graphics elements - shapes, text and raster images. The basic shapes in SVG are rectangles, circles, elipses, lines, polylines (connecting straight line segments forming open shapes), and polygons. These shapes are constructed using paths and can be filled with paint and stroked. Each fill and stroke operation has adjustable opacity settings. The types of supported paint are solid colours, linear and radial gradients and patterns. This means you can draw a circle with a black outline filled with a pattern of your choice all by just using text descriptions without the need of any graphic files.
Drawing an object in SVG comes down to issuing a series of instructions like draw a red rectangle with a blue outline that is 10cm in width and 5cm in height. The codes will look something like this:
<rect x="30" y="30" width="10cm" height="5cm" fill="red" stroke="blue" />
The positioning of SVG objects on a page can be controlled precisely using Cascading Style Sheets (CSS). Positioning in this case is controlled mainly by -x and -y coordinates. Other styling properties can be specified using CSS or XSL (eXtensible Stylesheet Language). Layering graphics is also possible with SVG's z-index feature, similar to that offered in CSS.
If several drawing elements share similar attributes, they can be grouped together using the <g> element. Individual objects or groups of drawings can be given id tags so that they can be manipulated later using scripts to produce animation. Naming the objects or groups of objects allows us to reuse them later.
It is still possible to embed raster images even though SVG is a vector format. The <image> element allows you to embed a bitmap image like PNG or JPEG similar to the way in HTML.
Raster Effects and other tricks
Say you have a circle that you want to add a shadow and apply some lighting effects to. Normally, to do this, you would have to apply the filter effects in a paint program like Photoshop or Fireworks, then exporting the image into a web-compliant format like GIF or JPEG. With SVG, it is possible to declare the specification of these filters in your codes directly without using any paint program. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.
Just to give you an idea, some examples of "Photoshop-like" filters declarable using SVG are lighting effects, Gaussian blurring, blending, displacement mapping and many more. It is also possible to adjust the hue, saturation and luminance of drawings. The masking feature (similar to that found in Photoshop) allows you to composite an object into the background. You have seen what different combination of effects adjustment can produce in a paint program; just imagine the possibilities available to you here using SVG.
Since SVG uses a coordinate system to position elements on a page you can transform the elements by rotating, skewing or scaling. It is simply a matter of transforming the coordinates of the current element into a new one.
Another of SVG's advantage is its palette of 16 million colours with support for colour profiles. This will make for more consistent rendering of colour across different viewing platforms and output devices. What's even better, these graphics can be printed off without loss of colour or detail, nor displaying jagged edges due to dithering.
Text and fonts
SVG certainly offers web designers more control over the layout and rendering of text on web pages. I am sure many web designers share the frustration of not being able to render text in specific font faces without having to preserve them as image files. Limitations and inconsistencies in web standards today have made rendering text in particular fonts a tricky task for web designers. SVG will prove to be the answer to all this frustration as it will be possible to embed fonts directly into a page.
Styling functions available to graphical objects are available to text as well, which means you can add shadow effects to a string of text or even gradate the text.
Another great feature of text rendition in SVG is that text strings can be rendered in a single line or along the outline of a path. You can chart the path of a curve and have the baseline of the text string follow that path.
SVG will improve the issue of accessibility in web design especially to the visually impaired due to the fact that SVG is a text-based format. Users who rely on screen readers and speech synthesizers will be able to read text within an SVG image. You can also include explanations for text elements whose meaning is not clear from their text content. Text within SVG images can also be indexed by search engines or searched within a browser by a user, features not available with Flash.
Support for Scripting and Animation
SVG's full potential can be exploited with the help of scripting languages like Javascript, Perl or Java. Graphics can be generated on the fly by having a script query a database to present high quality charts and graphs that update dynamically.
SVG's support for scripting also makes web content more interactive. Using scripts, you can specify events to be triggered with certain actions, indicate zooming and panning options and even specify different cursors to use in different circumstances.
SVG also has full support for the Document Object Model (DOM), which is a platform and language neutral interface that programs and scripts can use to access and update HTML, XHTML and XML documents. Besides using SVG DOM, animation effects can be achieved using SVG's animation elements which describes time based modifications to the document's elements. This will let us achieve animations akin to that in Flash intros.
Where SVG stands now
As mentioned previously, SVG is currently released as a candidate recommendation by the W3C. This is equivalent to releasing a beta software. Developers are now invited to implement the format and test it. It is anticipated that the testing stage will last a couple of months, after which the W3C will present the test results.
Viewing support
Currently, there is yet any browser which fully supports SVG graphics. A plug-in is needed in order for a browser to render SVG graphics. There are already Netscape and IE compatible SVG viewers available for both Windows and Macintosh platforms. The following are sites where SVG viewers can be downloaded for free:
SVG Editors
Current SVG editors include Adobe Illustrator 9, Adobe LiveMotion, Beatwave E-Picture Pro, CorelDraw!, ILOG JViews, Jasc Trajectory Pro, Mayura Draw, Quark Express and Sphinx Open. It is only a matter of time before more advanced tools are available to designers.
SVG Conversion tools
There are already tools available to convert different formats into SVG. The Graphics2D SVG Generator from Apache's Batik project is one example which allows all Java applications to export their graphics in SVG format. These graphics can then be imported, viewed, and modified in different environments.
The University of Nottingham has a developmental software project available online that will convert Flash's SWF files into SVG format.
Conclusion
We have looked at some of the capabilities of SVG and this only serves to tease us of the many possibilities SVG has to offer. Finally, we have an open-source web graphics format which signifies the end of having to make allowances for the limitations of HTML by forcing layout using nested tables and raster graphics.
SVG will mean smaller, faster, more interactive web documents displayable on a wider range of device resolutions from small mobile devices to desktop computers. When web designers have been fighting the cross-browser development war for such a long time, SVG will certainly seem like the signing of the peace treaty.
The success of SVG will be dependent on the emergence of tools for its creation and browser support for the SVG format. SVG now is at the stage where Flash was a couple of years ago. Judging by the phenomenal success of Flash adoption, it is entirely possible that SVG will follow that pattern of success. With all that SVG has promised to deliver, I believe the web industry has every reason to be excited. Perhaps Macromedia should start rethinking their next marketing plan.
Mun Shing Cheong is the Web Developer of City-based IT consulting and software development firm, SESI (sesi.co.uk). She also lectures part-time at City and Islington College in London. She is an active member of the British Web Design and Marketing Association (BWDMA) and spends most of her time on web development research.
