The Gilbane Report: Volume 10, Number 6

SVG - The Future of Web Rendering?

Download a PDF version of this article

Read the news for this issue.

HTML has been so successful largely because it is (or was) extremely simple. Like many successful technologies, the initial breakthrough happened when a magical "just enough" threshold was crossed - adoption soared, and now we all work differently. However, HTML had critics right from the start. One set of critics attacked the formatting presentation limitations of HTML, and predicted HTML would soon be replaced by a more graphically oriented format. PDF and Flash are the only serious survivors here, and they both allow for more graphically sophisticated content. A second group of critics decried the small, fixed tag set that prevented development of custom Web applications and the integration with enterprise applications that process more complex business data. XML and derivative standards emerged to meet this need.

Yet, there is still a critical gap between graphically-rich content that is difficult if not impossible to integrate with other enterprise data, and XML data that can be integrated with virtually any enterprise application but usually ends up rendered as graphically-challenged HTML. This month we publish an excerpt from SVG for Designers: Using Scalable Vector Graphics for Next-Generation Web Sites , a new book by Bill and Kate Binder, published by McGraw Hill and available (soon) at Amazon. In our article Bill looks at why Scalable Vector Graphics (SVG) has the potential to fill this gap. Whether you think SVG will take over the Web or not, it is difficult not to be intrigued with what SVG can do. As an IT strategist, you need to understand the issues and how SVG might help.

SVG - The Future of Web Rendering?

It's safe to report that n-tier computing is here to stay. Organizations have fully embraced the concept, and have adopted Java 2 Enterprise Edition (J2EE) application servers and related technologies to begin "webifying" existing systems and bring more business process to a browser interface. Indeed, in a stagnant period for software sales, application servers and related consulting and development have been a bright spot. This reflects the emphasis that businesses are placing on infrastructure, and their commitment to centering their enterprise architecture on Web-based applications and workflow.

With all of this n-tier development has come many new realities, though. We've already mentioned Java and the importance of the application server. Organizations are also working very hard on issues such as security, high availability, and performance. Slowly but surely, they are establishing excellent underpinnings for bringing more and more applications to the Web. These underpinnings will set the stage for wide deployment of Web services-or at least for "services-based" application integration.

Significantly, the one area in n-tier development that has lagged has been the client side. In fact, many enterprise applications include Java clients, and portal framework companies, especially, have emphasized Java client development, but client-side Java has simply not gained wide traction. Lacking a consistent programming environment on the client side, Web developers have fallen back on a lowest common denominator approach. As a result, most interfaces to Web-based applications are some combination of HTML and scripting languages (mainly JavaScript).

The result of this extensive reliance on HTML for client development is applications that do most of their processing on the server side, and provide most of their logic there as well. As these applications have evolved developers have begun to encounter problems with performance and scalability. One potential area for improvement, then, is the client side, and both individual companies and standards organizations have stepped forward with proposed technologies for improving the client-side experience for the user and the developer.

Among the proposed technologies is the World Wide Web Consortium's proposal for Scalable Vector Graphics (SVG) and Macromedia's Flash MX for enhancing the visual experience for the client. It's notable that both SVG and Flash MX bring a lot to mobile devices. MIT-based startup Curl Corporation has an intriguing offering-the "Surge" programming tools and runtime environment-that they position as the "client/web platform." And while Microsoft's .NET initiative has, thus far, been server-focused, there is no doubt Microsoft will turn more attention to the client side, and Bill Gates has recently been signaling exactly this trend.

It is far too early to place bets-in truth, little client development has been done with any of these tools. And while it's not hard to imagine Microsoft besting a startup like Curl, and the question of Flash MX vs. SVG is a tantalizing one, the likely winner will be combination of tools. Having said that, we are intrigued with SVG for a number of reasons, starting with its XML foundation and its adoption by the W3C.

Understanding SVG: The SVG Standard

One could argue that, since the advancement of HTML, no new fundamental technology has emerged to change how Web pages are rendered. We have moved ahead incrementally with better font and style sheet technology, but these have been changes of degree and not of kind. Most Web pages are still done with HTML tags, supported by scripts and static graphical objects like GIF and JPG tags.

Now Scalable Vector Graphics (SVG) has emerged, with the potential to be the next fundamentally new technology for production and design professionals. SVG-based graphics and Web pages can save time and money, improve quality, and revolutionize the way Web graphics convey information. Moreover, SVG will be able to do this with minimal new costs for software and training, and will result in a better workflow for Web production and for organizations that combine Web and print production.

SVG holds this promise for a few simple reasons. First, vector graphics are a necessary complement to the bitmap graphic formats such as JPG and GIF that now dominate the Web. Vector graphics mean better quality and greater precision for many types of illustrations and artwork, especially technical illustrations and other kinds of artwork created by computer-aided design programs. Second, SVG brings an industry standard approach to creating vector graphics on the Web. Up until now, there have been only proprietary methods for creating vector graphics. Third, and, perhaps most importantly, the SVG standard provides more than vector graphics handling, as it allows for the incorporation of vector graphics, bitmap graphics, text, style sheets, and scripts. Users of SVG cannot only create stand-alone illustrations; they can also create and exercise greater control over the design of entire Web pages. They can also flexibly incorporate other text, other graphics, data, and scripts. And finally, because SVG files are text files, they can be easily generated and manipulated, allowing for applications like data-driven graphics and personalization.

SVG gives the graphic designer, using virtually the current standard industry toolbox, the power to create live Web images. Unlike bitmap images, SVG images can dynamically update as the designer, the Web developer, or the end user enter or change data and otherwise interact with the Web image. SVG files can be scripted to automatically take this information and modify the existing graphic or regenerate the graphic. Importantly, SVG often provides this flexibility using less disk space and memory, providing faster upload and download times, and putting more creative control into the graphic designer's hands than current static bitmap technology.

A Hypothetical SVG Application

To see how SVG might revolutionize graphics, commerce, and information flow on the Web, let's take a look at a common Web transaction-buying tickets for an event. With bitmap technology, a fan generally sees a map of the stadium or arena and then has to choose via the static, unchanging map on the screen. SVG, on the other hand, could be used to create an image of exactly the seats the fan is buying, in, say, a seating chart of the stadium; SVG could also be used to create an image that simulates the view that the fan will have of the event.

In this scenario, we have a baseball fan whose father is visiting from out of town for two weeks in August. The fan wants to take his dad to a game. The dad, being elderly, needs easy access to the aisle and to rest rooms. The fan would prefer a day game. The fan isn't a millionaire, so he would need to purchase the lower- and moderate-priced seats. He's only been to this ballpark a few times himself, so he'd like to see how fans rate the seats and what type of view he and his dad would have from each seat. Obviously, he wants two seats together.

With standard bitmap files, it would be impossible-or at least extremely difficult-to create enough graphics to meet this fan's needs to visualize so many details. The Web site would have to anticipate each question this fan planned to ask and then create a graphic to help answer the question before the fan even logged on. For this one fan alone, the Web site would need to have at the ready potentially hundreds of bitmap files to even begin to answer his questions and show the views and seating plans he is interested in.

Not so with SVG. A live text file on the Web site, the SVG can dynamically update an infinite number of times, depending on the data fed into it. Just as the HTML itself is text and can be generated on the fly and intermingled with script and code, SVG is also textual. SVG is, in fact, based on XML. Because it is XML-based, SVG can be liberally mixed with other formats such as XHTML and scripting languages such as JavaScript. Entire Web pages could be rendered with SVG, or individual components such as graphics.

Back to our baseball fan. The basic SVG graphic is a map of the stadium, similar to any map of any stadium through which fans buy tickets. But, this map is different. The map changes as the data behind the map changes, depending on the information the fan wants to see.

Moving from the overall map of the stadium, the SVG-based graphic first changes by showing small "thumbnail" drawings of the seats available for the two weeks the fan's dad is visiting (the first two weeks in August).

Two weeks is a long time, so the fan asks what teams will be playing during that period, and then selects a set of games for the Texas Rangers, Aug. 10-14. The SVG document then changes again, showing only thumbnails for seats available for those dates. The fan then types in other needs: proximity to a men's room, access to the aisle. The SVG document changes again, the thumbnails showing seats available that meet the fan's criteria. The fan specifically asks for a day game. The graphic then shows seats available for two-day games, Aug. 11 and 12. The graphic displays seats for those two days. He decides to go with upper box seats and the map morphs again, showing only those seats that meet all his criteria. The fan then settles on several options, clicking on each of several pairs of seats; with each click, the graphic zooms in on the specific seats and automatically displays a typical view of the field from each seat and an overall fan rating of the seat. The fan then selects his seats, pays, and exits.

Finally, the fan can even print out a view of the seats that he can take with him to the game so he can find the seats more easily.

Meanwhile, the SVG-enabled Web site remains ready for the next fan and the next set of parameters. This fan only wants Sunday games and to sit in the bleachers behind the home bullpen…

Comparing the SVG Approach with the Traditional Web-Based Approach

Compare the SVG ticket-buying experience with options available on a Web site with conventional graphics and the advantages SVG offers become even more obvious.

Some Web sites don't even offer a floor plan for the arena or stadium because the downloads take so long-remember, SVG uses far less memory than do bitmap graphics so downloads are much faster and easier.

If the site does offer a floor plan, it is static-a mere picture of the seating. It never changes. Fans can't zoom down to a pair of seats and get a view of the field from those seats. They can't get pop-up graphics that give more information about the stadium or the specific seats. Instead, the fan must move on to another page to receive additional information. Fans don't receive real-time, up-to-date information regarding the availability of seats as other fans are buying their tickets. They can't print out the stadium or arena map, if it exists, because the bitmap graphic is prohibitively large for downloading (100 to 150KB), can't be effectively zoomed, and likely won't reproduce accurately on their printer.

SVG, on the other hand, provides all these features and more. For the end user, SVG-based graphics are

Higher graphic quality, for the screen as well as for printing

Zoomable (using Adobe SVG Viewer, if you zoom in on, say, the seats you've selected and the nearest entrance, you can print out this exact view to take with you to the venue)

Searchable, allowing you to quickly find seat JJ-398 because the text label is actually text and not rendered pixels; copy and paste any pertinent info such as directions, phone numbers, etc. that may be embedded in the layout

More informative (dynamically updated content shows information that is up-to-the-minute current-that is, seating availability)

Interactive (ToolTips on mouseover, drill-down for more detailed info right in the graphic, as opposed to having to read info from another window or page)

Just as importantly to the graphic designer and developer, SVG allows for richer, more detailed graphics on the Web page even as it makes the site more accessible to the user.

SVG graphics are overall much faster because the download is smaller (vectors are more efficient than rasters)-zoomed in views are not new downloads, but simple transformations that take place on the client side (as well as additional data that may be hidden on first load, but is revealed on interaction or animation).

SVG graphics can be richer looking, as there are a great number of filter effects that can be applied (filter effects create raster-style blurred drop shadows or 3-D bevels, custom font faces that allow text to remain as text for accessibility).

SVG graphics are manageable as an asset much like HTML. A designer can style a graphic using the same Cascading Style Sheet (CSS) as for the rest of the site. For example, background color for the graphic may be a color specified in the style sheet for the entire site. Say for a Giants game, the primary colors should be orange and black. The SVG image can dynamically be made orange and black by a simple change to the style sheet along with other elements in the HTML-a simple change cascades through the SVG along with the HTML.

These SVG assets can be reused for multiple applications (as suggested above, the graphic can be customized for different events; also use the same graphic for printing brochures, handouts, tickets, or other devices such as handheld browsers).

SVG's Potential Impact

The above example shows only one way in which SVG could help advance commerce on the Internet. Imagine graphics that change at the user's whim. The implications for everything from financial services to catalog sales are tremendous. SVG-based graphics would give consumers more choices and more confidence in those choices because SVG gives the consumer control and more ability to visualize the transaction they are making. And e-commerce is only one potential application (more are discussed at the end of this article). The potential applications are endless.

In September of 2001, the World Wide Web Consortium (W3C) published the W3C Recommendation for SVG 1.0, paving the way for software developers to begin, in earnest, developing products that support SVG. Adobe, Sun, Corel, and IBM, among others, are all over it. Adobe, significantly, has already built SVG capabilities into major products like Illustrator and GoLive, and they claim to have distributed over 35 million copies of their SVG Viewer.

The very presence of a format for vector graphics on the Web is significant. For all its promise as a graphical user interface and publishing medium, the Web has relied too heavily on bitmap formats like GIF and JPG that tend to be static and difficult to reuse, and they often need to be optimized for the particular screen resolution of the displaying device. As a result, most Web sites are laden with single-use graphic files, and there is little use of graphics to personalize the presentation of material. Moreover, with the growth of non-PC devices such as PDAs and cell phones, the limitations of heavy bitmaps become even more pronounced.

Advantages of SVG

General-purpose and specialized illustration programs have used vector graphics for years. In that sense, there's nothing new about the vector graphics aspect of SVG. Adobe Illustrator, among other programs, is based on vector graphics, as are more specialized programs like AutoCAD. The revolution comes when this technology meets the Web. Suddenly a whole world of improved, nearly three-dimensional documents opens up-live documents and graphics that designers can change and manipulate without having to regenerate a whole new set of graphics, graphics that morph at the whim of consumer demand, graphics that download in significantly less time than current bitmap graphics.

This combination of speed, versatility, and artistic control gives the graphic designer a dramatically more powerful, perhaps even a revolutionary creative tool. Instead of static Web images, drawn and created one at time, SVG gives the graphic designer the power to create and change multiple Web images simply by entering new data.

Advantages of Quality and Performance

Not only does SVG give the graphic designer a faster, vastly more powerful Web display, it also provides higher-quality graphics that will print more clearly and maintain a consistent resolution no matter the screen quality upon which they're viewed, no matter the size, no matter the dpi. That's the scalable part of scalable vector graphics. The image conforms to the new scale regardless of media, size, or screen quality.

Moreover, in the case of SVG graphics, less typically means more. While the bitmap formats GIF and JPG have excellent compression, the compression varies depending on the kind of illustration. Consider a very simple black and white illustration of a ruled line. This would actually compress very well in a GIF image. In this particular case, the GIF is going to be about 1/7th the size of the SVG image, because in this case the GIF uses compression to say, "make a black pixel, then make 999 more just like it." SVG: 811 bytes, GIF: 51 bytes. Bitmap compression works best when you have a lot of adjacent pixels of the same color, as in this example. The size advantage comes in with more complex documents, particularly ones that use built-in SVG filters and primitives, because then you can say "make a circle with a blur" instead of having to spell out every pixel in a different shade of gray. In the case of the image shown below, which shows a circle with a blur applied to its stroke, the SVG image is 1,280 bytes, and the GIF is 6,489 bytes-a significant size advantage for SVG in this instance.

Figure 1. An example of a simple graphic where SVG is dramatically more efficient than GIF

SVG images then are sometimes smaller and sometimes larger than corresponding bitmap images, so SVG won't give an advantage every time. What this means, though, is that designers would have the option of creating a complex image in one format or another, and then actually using the one that offers the best compression. It also means that some images that have traditionally been very large and hard to download can now be dramatically smaller and thus much more useful and easier to deploy.

SVG also provides several other practical benefits to the graphic designer:

Use of familiar graphic-design software, most notably Adobe Illustrator and Corel Draw, to manipulate and create these files. While there are special tools for creating SVG images, many people will want to use the tool that they already use for image preparation. Because SVG is a standard, support for it has already been built into several major products.

Better work flow and less labor for graphic designers. An illustration created for print today needs to be separately saved in another format, often with different characteristics, for deployment on the Web. If the image changes, the entire workflow typically needs to be repeated, leading to tedious, expensive, time-consuming rework.

Also, because SVG images can be managed as assets, and because SVG supports programming models such as the Document Object Model (DOM), designers can work in parallel with Web site developers. While the developers are creating and updating the relevant code and data, the designer can be creating and updating the illustrations and animations. This is an improvement over situations where the work must be done in serial fashion-where first the designer works, then the developer, and so on.

SVG and Data-Driven Graphics

The fact SVG images can be data-driven-that is, the software creates images directly from the data provided-gives SVG graphics one of its biggest practical advantages over bitmap technology. While there are tools for creating bitmaps on the fly, they are typically limited to single-purpose tools, such as a tool we've used for creating math symbols directly from MathML-encoded data.

SVG files are XML-encoded text files, and, as such, human readable and human malleable. Just as it is easy for a savvy production person to change, for example, the size and style of text in an HTML file, it is similarly easy to make that kind of change in an SVG file. As a result, making SVG files "data driven" is really a matter of generating or regenerating the appropriate text string. To give you an idea of how SVG encapsulates text and graphics rendering in a text string, see the following:

<line x1="64" y1="189" x2="156" y2="189" style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/>

This line of SVG instructs the software to draw a line, beginning at x,y position 64,189 and ending at x,y position 156,189. It goes on to describe the width of the line, whether it is filled or not, and in what color it should be rendered. If this string existed in a text file, it would be straightforward to edit; if a program were generating it, it would be straightforward to generate a slightly different string; and so on.

With the data encoded in SVG, any software that can interpret the SVG will generate the graphic. And once that the program generates the image, it can then be easily regenerated if the underlying data changes. The SVG-compliant software will automatically alter it to match new information. This feature alone will save graphic designers and the graphics department untold hours of labor. No more redrawing an entire graphic or set of graphics when a detail changes. Just plug in the new numbers and a new graphic displaying the new information can be generated.

Data-driven graphics will be especially useful for Web sites that track industries with rapidly changing statistics. Financial sites come to mind. Investors demand a wide range of financial information-interest rate changes from the Fed, stock prices, unemployment data, and a myriad of other always-changing statistics. Investors also demand varying snapshots of such data-differing frequencies, levels of detail, and so forth. Providing a graphical view of such data would be a significant advantage for a financial Web site. SVG opens up the possibilities for what kinds of graphics can be employed on a site, and how dynamically and flexibly they can be modified and displayed.

SVG and Interactive Graphics

One step beyond creating a data-driven graphic is to make a graphic interactive for the user. With a little bit of scripting, for example, a data-driven chart can easily be made interactive. For example, the seating chart described above is an excellent example of interactivity. The base SVG file, as we described it, is the stadium seating chart. By adding certain information-the dates for desired games-the base drawing can be regenerated, and then regenerated again when additional information is added (the price the fan is willing to pay, the need for proximity to the aisle, and so forth).

Adobe's site (www.adobe.com/svg) also uses SVG for interactivity; one simple but effective graphic allows you to click on and view the name of a chemical to see its three-dimensional structure, and another allows you to see how an Airbus looks with various exterior lights turned on and off.

SVG and Personalized Graphics

If interactive graphics are one step beyond data-driven graphics, personalized graphics are perhaps one step beyond interactive, or perhaps are a kind of interactive graphic. They imply some amount of interactivity in the same way personalized Web text does. With a personalized Web site such as www.amazon.com or my.yahoo.com, you have at least "opted in" and agreed to be profiled at least to the extent that your browser passes on some information (through a cookie, for example). Or, you may have more explicitly provided some information from past orders, or by filling out a profile, or perhaps even by storing some data there. Either way, the Web site is somehow able to identify you, and customize, or personalize, the experience for you accordingly.

Typically, such personalization is textual. The site www.amazon.com, for example, greets the return customer with "Hello (your name here)," and then proceeds to list "Your recommendations," "Your book store," and so forth. As shown below, some of these personalized lists include graphics-a screen shot of a book cover, for example-but the graphic presentation itself is static from user to user. What if, instead, certain personalized graphics could be generated automatically? For example, as authors, we might like to see a customized bar chart showing all our books sold, by day, with certain colors displayed for sales exceeding certain thresholds. Or a buyer with an outstanding gift certificate might want to see a running balance, displayed as a graphic of a dollar bill with the precise balance showing.

Figure 2. Personalization such as with Amazon.com can be useful, but it is limited to the textual elements only.

"Personalization" does not have to be just textual. It is every way content can target a specific individual or audience by

Demographic (That is, the customer who bought the box seats at the ball game gets the high-end local Mercedes ad included on their SVG ticket, while the customer who bought the cheap seats gets the $1 off coupon for a beer.)

Culture (That is, the color red may be in poor taste in one culture, so it is replaced by something more suitable.)

Language (That is, SVG's "systemLanguage" attribute can be used to detect the user's language and display tex t content in the correct language.)

Accessibility (That is, properly tagged content is readable by screen readers so that the visually impaired get as much info and interactivity from the graphic as anyone else. Note that not all screen readers can read SVG content-this is a plug-in to browser issue.)

Potential Applications

Beyond the e-commerce potential discussed in the sports event scenario earlier, SVG-based graphics provide great possibilities for scientific and medical illustration, engineering documents, architectural plans-virtually any profession or academic field in which data-driven graphics help people understand information. Professions using heavy technical documentation have been slow to use the Web as publishing medium, precisely because browsers can't handle large, complex illustrations that are best rendered as vector graphics. SVG-based graphics typically require less disk space and memory, and are thus are more easily Web navigable.

Technical illustration is a good example of the kind of application that can take good advantage of SVG. An automotive manufacturer we have worked with does all of their parts illustrations in a sophisticated CAD-CAM system. When they are ready to publish the parts catalog in print and on the Web, they convert the CAD drawings to TIFF for the print catalog and to GIF for the online catalog. If an illustration changes, they need to go all the way back to the CAD system and regenerate the illustration in both formats. The GIF files are less than satisfactory for the Web, however, as they are often too big and unwieldy. The lower-resolution display available through the browser, and the more limited screen size, make it very difficult to satisfactorily view a large-format, detailed illustration.

Final Thoughts

Ultimately, SVG will prove itself in how it is used in real-world applications. The compelling thing is that SVG is an entirely open, entirely textual format. It can be easily generated from a database for applications such as dynamic page serving. It can also be modified on the fly for such applications as personalization.

If you visit the Adobe site, (or any other SVG-powered site) you'll confront one of the few things standing in SVG's way-it requires you to download a browser plug-in. We expect this will go away in some future version of Internet Explorer, which should add SVG rendering. In the meantime, this lack of browser support will create some hesitancy in the market. However, Adobe does have a track record of creating a product that people are willing to separately download and use; last we checked, Acrobat had reached more than 110 million downloads.

The other practical challenge is a relative lack of tools for creating SVG, but this is changing quickly. As mentioned above, though, Adobe is building SVG support into their products, as is Corel. Perhaps more significantly, database vendors and content management companies are adding SVG support, as they understand well how central SVG is likely to become to Web development and publishing.

Bill Trippe
bill@gilbane.com