[3D Rendering Tutorial]
SVG: The Future Web FormatTom Arah investigates SVG a new graphic format that could revolutionize the Web.
As designers have found to their cost the Web was not originally intended to be a design-rich environment. Instead HTML (hypertext markup language) was devised as means of disseminating information in the form of simple, reflowable text. With the arrival of Mosaic and support for the <IMG> image tag things began to change. Now that GIF and JPEG bitmaps could be embedded in Web pages the browsing experience became much more visual. The use of flat-colour GIFs for buttons, logos and headings took Web design onto a new level fueled by the development of dedicated Web graphic programs such as Macromedia Fireworks and Adobe ImageStyler.
However, in many ways this reliance on GIFs is just a historical accident as the format is by no means ideal. The body in charge of independent web standards, the World Wide Web Consortium (W3C), recognised as much and its Graphics Activity group helped develop a new dedicated Web bitmap format, PNG, with features such as better compression, ICC support and alpha transparency. Support for PNG is now growing, with the latest Navigator and Explorer supporting the format natively, but it will be a long time before PNG becomes the premier Web image format. In fact before that happens PNG is itself likely to be superceded.
This new Web image standard will be radically different to both GIF and PNG as it won't be based on pixels at all but rather on vectors. The two main benefits that vector images offer over bitmaps - small file sizes and resolution-independent scalability - become absolutely compelling within a Web environment where download times are crucial and viewing platforms vary dramatically. The advantages of vectors for the Web are so clear that a number of developers have already tried producing their own solutions such as Corel Xara's WEB and Deneba Canvas's Colada CVW files. The classic example of the use of such formats is the embedded map where browsers can zoom in on the image without loss of quality and with a download considerably smaller than the comparable fixed-size bitmap.
Corel Xara offers vector export but without the necessary plug-in browsers aren't able to see it.
The benefits are obvious but so are the problems. To be able to view such formats the browser must either go to the trouble of installing a dedicated plug-in or have Java-based viewing available and enabled, otherwise they won't see a thing. Clearly what is needed is a universal independent standard that both graphic applications and browser developers can support natively and which can therefore deliver the critical mass necessary to ensure the format takes off. Cue the W3C. Back in Spring last year the W3C Graphics Activity group signalled that having finalised PNG they were ready to tackle a new Web-optimised vector format and that they were open to suggestions.
A couple of technical CAD-inspired formats were considered but the two major submissions were Adobe's PGML (precision graphics markup language) and Microsoft's VML (vector markup language). The two options were very different in many ways with PGML stressing output quality based on Adobe's Postscript and PDF know-how while VML stressed the importance of re-editability based on Microsoft's Office 2000 experience. What connected both formats though was that they were both conceived of as varieties of XML. In other words, rather than being traditional binary files, both PGML and VML are text-based languages acting to describe graphics in the same way that HTML describes web pages. This has a range of knock-on advantages, as we'll see, but the immediate consequence is that it made it relatively straightforward to combine the best of both approaches into the new W3C-approved Scalable Vector Graphic standard, SVG.
At the time of writing the SVG format still has to be finalised and approved but the working drafts posted on the W3C site over the last year make it clear how the format will work. Each SVG graphic is contained within a top level <svg> element which will enable an alternative bitmap to be shown for non-supporting browsers. Within the SVG the vector graphic will be built up with <rect>, <circle>, <ellipse>, <polyline>, <polygon>, and <line> elements with irregular objects handled with the all-encompassing <path>. Shapes can be nested and grouped into <g> elements and, crucially, these can be named and reused. The formatting of these objects is controlled through fill and stroke-based paint operations and again groups of parameters, such as gradients, can be named and reused. Best of all, wherever appropriate such formatting conforms to CSS and can be controlled on a global page level.
Putting this all together it's possible to see how a SVG will operate in practice. By centring text over a semi-transparent circle on a rounded rectangle you would have a simple button template. By naming this as a group it could be repeated as many times as necessary with just the overlaying text altered. By embedding each <svg> within <a> anchor tags you could produce all the navigation buttons you need with minimal effort and minimal download. Best of all the buttons would remain live and open to styling. Using a master CSS style sheet you could instantly change the colour of the button elements and text typeface automatically across an entire site!
This is huge power in a different league to scalable maps. Effectively you would have the restyling control offered by a dedicated web graphics program like ImageStyler but all available and controllable from a CSS style sheet. Best of all there would be no need to go through the current bitmap-based GIF route so that bandwidth demands could be cut to a fraction. It's no coincidence that today's major dedicated web graphics applications - Fireworks, Xara and ImageStyler - are all vector-based drawing programs optimised to output bitmaps. With SVG you could entirely cut out the bitmap middleman and keep the size and flexibility benefits of vectors throughout the production process from creation to viewing. Throw in the support of Microsoft, Netscape, Adobe, Autodesk, Corel and Quark and you can see that SVG is set to take the world of web graphics by storm.
SVG could offer the vector and restyling benefits of Imagestyler without the need for a bitmap middleman.
But hang on - hasn't something been forgotten in all this? You would never know it from the W3C deliberations - where the name is never even mentioned - but of course there already is a web vector standard out there: Macromedia's Shockwave Flash format, SWF. This isn't an XML-based language but a more traditional binary format that is embedded in the HTML page through <object> and <embed> tags rather like the GIF binary is through the <img> tag. However that's where the similarities cease as Flash is much, much more than just a GIF replacement.
Flash has always recognised that another of the benefits of vector shapes over bitmapped pixels is that once an object has been described all you have to do to animate it is to describe a path or other transformation. In other words all-action movie files are only marginally larger than static images and both are much smaller than their GIF equivalent. Building on this core animation strength Macromedia has added a level of interactivity that in the latest Flash 4 even offers conditional processing. Even better are the multimedia features with excellent streaming MP3 sound and video support for QuickTime 4 movies. Taken together it means that, in comparison to a simple GIF or SVG button, Flash can offer a fully scalable, interactive animated character complete with lip-synched speech and background music!
Flash vector movies offer far more than static images.
Of course the downside of Flash's binary SWF format is that it needs the Flash player to be installed to be viewable. But even this is no longer a huge problem. The benefits that Flash offers are so vast that the Flash player is a must-have download if you want to be able to appreciate many of the most popular sites on the Web. As such a recent independent survey claims that 83% of browsers are now Flash-ready - a greater market penetration than Netscape, Explorer or even Java can boast. On my own site the figure is nearer 50%, but even so it's clear that Flash usage has reached a level where it becomes the browser manufacturers' responsibility to ensure that they are Flash-compatible and both Microsoft and Netscape now bundle the player with their latest releases. Critical mass has been reached.
Suddenly the future for SVG isn't looking quite so bright. Flash offers greater functionality, better compression and a larger installed user base. More to the point it actually exists whereas SVG still hasn't got off the drawing board. Worst of all what looked like SVG's main strength, its XML basis, suddenly looks like a liability. There's simply no way that a text-based description of a graphic can be as efficient as a binary representation so that a Flash equivalent of an SVG file will inherently be smaller. The obvious comparison is to VRML, the text-based virtual reality markup language for describing 3D environments. This offers considerable power but its files are simply too large and slow to have made the impact expected of it. Into the gap has stepped Metacreations with its much more efficient streaming binary format, Metastream.
Flash has been such a success that it has effectively moved the goalposts as far as vector-based web image formats are concerned. A simple vector-based replacement for GIFs won't be enough to knock Flash from its position as the de facto Web standard. So is SVG effectively dead on arrival? Absolutely not. Instead it has evolved into a completely new and radically ambitious proposal that could entirely change the face of the Web. Looking at the latest working draft submitted in July shows that SVG will tackle Flash head on.
The W3C working draft gives details of the proposed SVG format.
The first paragraph of the Introduction shows the format's new scope:
"SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), 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, template objects and extensibility."
It's clear that the intention is to use SVG for a lot more than buttons. In particular, in addition to the vector elements described above, SVG also supports JPEG and PNG bitmaps through the <image> element. It's also clear that the compositing control offered over both bitmaps and vectors will be far greater than currently available with the ability to use advanced masks and alpha channels to control features like transparency. All controls available for fills will also be available for strokes which again takes SVG into new territory. Potentially most powerful of all are the filter effects which will allow bitmapped effects, such as semi-transparent drop shadows, to be applied client-side. Thanks to XML's extensibility it will also be possible to embed application-specific data to keep images live and editable and so turning SVG into an all-encompassing graphics standard.
Just as significant is the handling of text through the <text> element. Crucially, this is dealt with as XML character data which means that all the text in the SVG remains selectable and searchable just as it is in HTML. With the use of CSS for controlling text formatting within the SVG the distinction blurs further. In fact the SVG should be able to incorporate HTML itself as another stated aim is "to provide a frame for the HTML/CSS processor so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of an SVG document."
The new picture of SVG that is emerging is a long way away from zoomable maps and stylizable buttons. In particular it is apparent that the full potential of SVG isn't as embedded fragments within HTML but rather the reverse with the SVG acting as the main document and containing shell. In other words, at its best, SVG will be the Web page itself. Of course this is where the scalable in scalable vector graphics really comes into its own. When the whole page including text is scalable, design can move onto a completely different level. The advanced composition controls are a huge bonus but the real difference will be that whatever device the browser is using, from handheld to 21" monitor to printer, the designer can control exactly what they will be viewing or outputting! Heaven. As the W3C puts it "this benefit to Web users as a community cannot be understated."
The real benefit of scalability is that entire pages will look the same on whatever screen they are viewed.
In this new page design role, SVG acts like a static Flash counterpart, but that's only the beginning. The second paragraph of the W3C introduction reveals that:
"SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG allows for straightforward and efficient vector graphics animation via scripting. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on HTML and SVG elements simultaneously within the same Web page."
In other words, SVGs will be able to act much like full Flash movies. Animation will be possible thanks to a "syntax for describing simple time-based modifications on any attribute or property on any of its elements." This will enable the creation of motion path animations, fade, scaling and rotation effects and could spell the end for the animated GIF. Interactivity meanwhile becomes possible thanks to the ability to assign standard event handlers to any object or group which will enable rollover and button-based control. Even more significant is the way this is implemented through SVG DOM support which opens up every element in the graphic to scripting. As the working draft says "Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. As a result, virtually any kind of animation can be achieved, including motion paths, color changes over time, and transparency effects."
Ultimately it is this integration between the SVG proposal and other existing Web technologies such as DHTML and CSS that is the format's true killer feature and gives it the edge over the standalone Flash format. It means that the graphical elements of a Web page will no longer be seen as semi-detached add-ons but rather form its heart as a fully integrated and fully controllable part of the overall design. As other technologies such as SMIL (synchronised multimedia integration language) come on tap they will be similarly incorporated to produce an unmatchably rich Web experience in which text, graphics, multimedia, style and scripting elements are seamlessly blended. In fact it is this synergy of different technologies, all pulling together to create a product that is more than the sum of its parts, that represents the ultimate scalability in SVG.
The benefits for the end user should be immense with the Web experience finally beginning to live up to the WebTV dream. In fact if SVG fulfils its potential it might just be that HTML will come to seem like the poor relation with the richest experiences on the Web only available through SVG and the next generation of XML-based browsers. The revolution could be just as radical for creators as consumers. The days of hand-coding in Notepad will certainly be over with a new breed of truly wysiwyg XML-authoring apps combining the features of Dreamweaver, Fireworks, ImageStyler and Flash into one master program. I can hardly wait.
But of course I'll just have to. It's worth remembering that the SVG proposal hasn't yet been finalized at the time of writing and the most common sentence in it is still: "The exact mechanism for providing these capabilities hasn't been decided yet - many details need to be worked out." Even when the format has been approved there's a long way to go before supporting browsers have proved their reliability and developed the necessary user base (especially as Microsoft has steamed ahead with its own VML format in any case). Even then there's the chance that the format will be too download-heavy and slow to render to prove practical. As PNG and VRML have shown, there's a big gap between the drawing board and the real world.
For the foreseeable future then there's no question that Flash remains the web vector format of choice. Moreover, with Macromedia's moves in opening up both the SWF format and Flash player code and various hints about future XML-compatibility, there's still a good chance that SWF will see off the SVG challenge. What's not in doubt is that the Web is changing and that the designer's nightmare is definitely coming to an end. In fact, with a technology like SVG at its heart, the Web looks set to become the designer's dream - visual, interactive, animated and scalable.
The latest SVG working draft is available from http://www.w3.org/TR/WD-SVG/index.html
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]