Chapter 17. The Future of SVG

CONTENTS

In this chapter:

•  Where Does SVG Fit in a Web Graphics Strategy?
•  SVG and Macromedia Flash
•  The Future of SVG
•  SVG As a Web Authoring Tool
•  Creating SVG Dynamically

Where Does SVG Fit in a Web Graphics Strategy?

The history of computing is littered with good technologies that lose out to better-marketed technologies. Will that be the future of SVG to be consigned to the dustbin of computer history, like the IBM operating system OS/2, which lost out to Microsoft Windows a decade ago?

Or, will SVG meet a practical need of both corporate and individual Web developers and designers?

What is the future of SVG?

I suspect that the answer to this question is something that will be of great importance to many readers of this book as well as to many who don't read it, perhaps because they are unaware that the question is so important to their professional futures as Web graphic designers.

Do the intentions of the designers of SVG look like they will come to fruition? Will SVG replace many uses of bitmap graphics? Remember that that is what the SVG requirements document anticipated SVG would do. If it replaces some of those uses, which ones are likely to be affected?

What about the head-to-head competition of the W3C open-source vector graphics standard for the Web and the heavily used proprietary vector graphics format, Macromedia Flash? Will SVG even dent the market share of Flash? Will SVG grow solely at the expense of bitmap graphics? Or, do Flash designers have good cause to worry that the open-source SVG will erode their current dominant market position?

As with many important questions, the issues involved aren't simple ones. Significant commercial interests are at stake.

Early in the writing phase of this book, Adobe announced that it intended to distribute 100 million copies of the Adobe SVG Viewer by around April 2002. Part of that huge distribution will take place in association with the distribution of RealPlayer and part in association with sales of Adobe Web and graphics products. If Adobe achieves its goal, and I have no reason to doubt that it will, SVG will clearly have a critical mass of viewers in the marketplace.

After the Adobe SVG Viewer achieves that critical mass, as surely it will, the two vector graphics formats can go head-to-head in direct competition.

The Adobe SVG Viewer is now technically superior to any other options. If the other SVG viewers, such as Batik, don't catch up, or if major browser vendors don't implement SVG natively, the possibility (some would say danger) exists that a dominant Adobe SVG Viewer could make SVG a quasi-proprietary technology. For the health of SVG, the Adobe Viewer needs competition.

Most of this chapter looks at the potential use of SVG in isolated market segments because they are easiest to analyze (or speculate about).

For static graphics

As you have seen throughout this book, SVG can readily produce the simple static graphics that form the bread and butter of Web page graphics furniture. This area is, or has been until recently, the almost exclusive home territory of bitmap graphics, such as GIFs and JPGs. However, JPEGs are likely to retain their dominance for displaying photographic images on the Web.

Recently, I was carrying out a Web-based research project (unrelated to this book) in a part of the Web that I had never seriously looked at. The thing that struck me was the increased use of Flash graphics for straightforward Web page furniture.

If Flash is already able to displace bitmap graphics from at least some basic use on Web sites, there's no reason that SVG graphics might not also make a significant impact in the same sphere.

Indeed, SVG will have a huge advantage over Flash in making inroads into that area. That the source code for SVG images is always visible makes it likely that many Web users will examine the SVG graphics used in that way to see what is there, behind the covers. Those Web users will either learn from what they see or (with human nature what it is) "borrow" code that produces visual effects they like.

That universal access to source code is how the use of HTML exploded a few years back. I fully expect to see the use of SVG explode in a similar manner. But you must keep one important difference in mind: When the use of HTML exploded, the number of Web users was perhaps measured in a relatively small number of millions. Now, users are measured in hundreds of millions. The number of authors won't equal the number of users, but the number of Web authors has also grown substantially in recent years.

Just how huge and how fast will the explosion of SVG use be?

For animated graphics

Animated graphics is an area where I see SVG (and, to some extent, Flash) likely to make progressive inroads into the use of animated bitmap graphics. The subtle and controllable effects that can be produced in SVG far exceed anything possible with a GIF of acceptable size. PNGs are perhaps less inferior to SVG, but PNG hasn't really ever reached critical mass, unlike the use of animated GIFs.

Already, I am seeing the increasing use of simple Flash animations in basic animated Web page furniture. SVG is fully a match for Flash in this area, I believe, and, again, as far as grabbing market share, has the enormous advantage of being open source. Non-expert users of SVG will quickly get up to speed to a degree, either by learning from the code of others or by straightforward code theft. Whatever the morals of that practice, the practical impact will be, in my view, a huge growth in the use of SVG by non-experts for producing relatively simple Web page furniture.

Java applets

Many readers won't be making much use of Java applets but, for completeness, I'll briefly mention how SVG might affect that use.

For some uses, SVG-animated graphics will be go head-to-head with existing uses for Java applets. For example, in Chapter 8, "Animation: SVG and SMIL Animation," you created a scrolling window of text that uses SVG to provide functionality for which a Java applet typically might have been used. Similarly, the SVG banner ad with scrolling text might have been implemented previously as a Java applet.

If many millions of Web users have the Adobe SVG Viewer, not to mention the alternatives, the number of site visitors capable of viewing SVG might soon exceed the number who are capable of, or who have chosen to be capable of, viewing Java applets.

SVG animations alone might significantly displace the use of Java applets. More sophisticated Java applets might be more resistant to the impact of SVG, but even those are likely to find competition from SVG combined with JavaScript for at least some uses.

For interactive graphics

As I demonstrated in Chapter 5, "Creating Navigation Bars," SVG Web furniture can provide all the navigation functionality needed on a Web page. Creating some visually attractive rollover and similar effects is a straightforward process.

In this area, I see SVG having an impact on the use of HTML or XHTML with scripting languages. For many new users, the ability to create rollovers and other effects by using a simple text editor that uses SVG or by examin-ing or acquiring other people's code will lead to a growth in interactive SVG graphics. This process is, in my opinion, more intuitive and more efficient than using a scripting language and multiple bitmap images.

For Web authoring

When I first announced the existence of SVGSpider.com, I was amazed and somewhat shocked by the vitriolic reaction of a few individuals who strongly, passionately, believed that SVG ought not to be used for authoring Web pages.

I was unable then, and am unable now, to understand the depth of animosity that the experiment generated because the proprietary vector format, Flash, was being widely and routinely used for exactly that purpose already. With that background, it was obvious, at least to me, that SVG would make a great XML-based Web page authoring tool.

Flash demonstrated, as did SVGSpider.com, that creating Web pages solely from vector content is entirely possible.

As I have shown you in Chapter 12, "Creating a Simple SVG Web Site" (and with the demonstrations on SVGSpider.com), SVG is a capable Web page authoring technology.

Will SVG displace HTML? I expect that it will, probably more slowly than its impact in the graphics market. But after non-expert people start experimenting with SVG to produce Web page graphics and realize that SVG can be used equally to author whole Web pages, I expect to see the substantial growth of SVG in this arena.

SVG and Macromedia Flash

For many people reading this book, this is the $64,000 dollar question: What impact does SVG have on Flash? For a few, the impact of the impending competition between SVG and Flash will be measured in many millions of dollars rather than in tens of thousands. For smaller players, making the right choice might make the difference to how well, if at all, their graphics design career progresses.

In several earlier sections in this chapter, I have touched on comparisons of SVG and Flash but how do I view the overall picture? Will the well-established Flash crowd out the young pretender, SVG? Will the open-source, W3C standard SVG dethrone Flash? Or will both succeed, with a huge decline in bitmap graphics on the Web? Or will Flash and SVG carve out separate niches on the Web?

At the time I wrote this chapter, the SVG specification, although essentially complete, was not a full W3C Recommendation, although it is likely to be by the time this book appears in print. Flash, on the other hand, at version 5 is a fairly mature technology. However, SVG has the potential benefit of having familiar vector graphics drawing tools, such as Corel Draw 10 and Adobe Illustrator 9, being able to export SVG. In addition, Jasc, which made the successful bitmap editor Paint Shop Pro, has produced WebDraw, a capable drawing package focused directly on SVG that promises to be a comprehensive SVG authoring package, including SVG animations.

Significant changes were made from Flash 4 to Flash 5 that demanded of users some additional new learning. Those who have already invested that time and effort might have an understandable reluctance to spend time exploring an alternative, competing technology. However, as additional SVG-enabled animation tools come to market, a significant number of Flash designers are likely to at least explore the alternative tools.

Because those tools were not yet marketed at the time I wrote this chapter, the relative futures of Flash and SVG in that arena are uncertain. I expect that the numbers of users who hand-code SVG animations will be small, so much of the competition will center on the usability and power of the animation tools for Flash and SVG. Can Macromedia improve an already powerful tool? Are a significant number of Flash designers finding Flash too complex? Will Adobe, or someone else, produce an SVG animation tool with a Photoshop-like interface that provides a seductive, but perhaps not easy, path for Photoshop users to transition to SVG? Or, will a code- con-cealing approach be seen as inadequate? Perhaps that is where Jasc sees an opportunity, by providing in WebDraw an SVG drawing and animation tool with simultaneous access to the SVG code.

Of course, I don't know the answers to some of those questions. Nor, I suspect, does anyone else now. It is simply too early to know what the future focus of the competition between SVG and Flash will be. But, if I were a Flash developer, I might be wearing a worried frown on my forehead.

The Future of SVG

Someone once said something like, "Predictions are a risky business, particularly with respect to the future!" So I am possibly being foolhardy in trying to predict what the future holds for SVG.

Let me put my head right on the chopping block. I believe that SVG has an exciting future. I can see SVG replacing bitmap graphics for many uses and also providing potent competition for the existing proprietary Web vector graphics format: Macromedia Flash.

I can also visualize SVG, in addition to its effect on bitmap and proprietary vector graphics, making an impact in the traditional HTML and XHTML Web graphics space. I expect to see SVG make a major impact as part of the content to be displayed by a new generation of multi-namespace XML browsers. Take a look at some of those points in a little more detail.

SVG, because it is XML, has a fundamental advantage over bitmap graphics and over Flash in a Web whose future will be, like it or not, increasingly XML based. I am not suggesting that XML capabilities cannot be grafted on to Flash (they already have been, to a degree, in Flash 5), but Flash is not XML based, nor is it likely that it ever will be. If Flash becomes an XML-based vector format, that will be, in my view, Macromedia's acknowledg-ment of defeat. Given the contribution of Flash to the Macromedia bottom line, that concession is not something the company would make lightly.

I hope to see quality implementations of SVG in Internet Explorer and the Netscape browser. With the wide availability of the Adobe SVG Viewer, the impetus for native support might be stifled or delayed.

Factors influencing the future of SVG

When you are thinking about the future of SVG, keep in mind several factors.

You need to be realistic. You need to be aware of the fact that SVG is barely a completed first version of a new technology. A nonproprietary graphics technology, based on XML and always editable, has never been available. Your mindset for even thinking about creating Web graphics needs to undergo a paradigm shift.

Perhaps most radical is that the source code for Web SVG images will be accessible to many, many thousands of interested viewers of SVG. The techniques of creating simple or sophisticated SVG graphics will all be available for study, as was the case with HTML Web pages a few years back. Just as there was an explosion of interest in creating Web pages with HTML, I expect a similar explosion of interest in creating SVG Web graphics. After all, studying the techniques, and copying or adapting the techniques, of the skilled users of SVG Web graphics has never been easier.

Using SVG with HTML or XHTML

In the short term, this is likely to be a core use of SVG on the Web. Most current Web pages are HTML with limited uptake of XHTML 1.0. Using SVG images to replace static and animated bitmap images and to potentially replace Flash graphics has advantages. SVG images can be downloaded significantly more quickly than bitmap graphics. In addition, SVG images can produce subtleties of transitions and interactivity that are difficult or impossible to achieve with bitmap Web graphics. The superiority of a vector graphics approach for some Web graphics has been demonstrated by the explosion in the use of Flash on the Web.

One practical issue is how quickly ordinary users will have the capability to view SVG. Until the major browsers incorporate the ability to display SVG natively, users will need to download SVG viewers (probably the Adobe SVG Viewer for now). But the Adobe ambition to have distributed 100 million SVG viewers by spring 2002 means that the time when SVG reaches critical mass for those viewing HTML or XHTML Web pages cannot be far away.

Using SVG with bitmap graphics

In Chapter 16, "Building Your SVG Skills," I briefly touched on the possible use of SVG with existing bitmap graphics in clipping paths. I encourage you to think of those existing bitmap graphics that are worth saving as visual components. They have limitations as visual components because they are no longer editable in GIF, JPEG, or PNG format. But they do have at least some potential for reuse.

Creative designers will explore many other potential uses of bitmap graphics with SVG. Whether a better understanding of how to create SVG images will supplant that use remains to be seen. But using bitmap images as the input to animated SVG clipping paths, for example, has the potential for many interesting visual effects.

SVG As a Web Authoring Tool

In Chapter 12, I showed you a little of what SVG is capable of as a "sin-gle-language" Web authoring technology. For some Web authors, I would imagine that having to learn only one language to produce viable XML-based Web pages will be an attraction. That approach will inevitably be looked down on by those in the happy position of working in a team environment where each team member has one or more XML specializations.

Creating SVG Dynamically

In the introduction to this book, I mentioned the commercial pressures operating on Web-enabled businesses wherever they might be situated.

Many e-businesses will have SVG created dynamically on the server side, perhaps in a real-time graphing of stock market prices for selected stocks or weather information, such as overnight temperature for growers of frost-sensitive crops.

Those continually updated images could be created server-side using SVG. For some of the graphing, as opposed to graphical, uses of SVG, little interaction might occur between graphics designers and server-side programmers. For other uses, however, that interaction might be considerable. If you, as a graphic designer, have some worthwhile understanding of how to code SVG, your relationship with server-side coders might be a much more enjoyable and productive one.

SVG, SMIL Animation, and SMIL 2.0

SVG can be one component being included in XML-based multimedia presentations. SVG natively includes SMIL Animation capabilities, yet SVG images are not limited to being stand-alone images: They have enormous potential as part of an XML-based, multi-namespace multimedia future.

Imagine creating graphically rich animated company reports or brochures using SVG in combination with SMIL or XSL-FO. The creative opportunities are likely to be substantial for those with the requisite understanding, foresight, and combination of skills.

Using SVG with XForms

SVG Web pages lack the ability to convey to the Web server the information entered on forms. By combining SVG with the forthcoming XForms standard, a powerful, XML-based, forms-capable Web authoring environment becomes possible. You can see a hint of what might be possible already by experimenting with the SVG and XForms capabilities in the X-Smiles browser.

For the latest version of the XForms specification, visit http://www.w3.org/TR/xforms/.

Using SVG with XSL-FO

SVG can be embedded in XSL-FO. XSL-FO, surprisingly, can be used to display text-based information on the Web, which opens up new metaphors of use on Web sites. It becomes possible to "turn pages," as it were, on an XSL-FO Web site. Whether that will be seen as preferable by users compared to the scrolling facility you have become used to remains to be seen.

The future for SVG is bright. In addition, Web graphics designers who build skills in SVG early will be in a good position to explore and exploit the huge potential that SVG brings to Web graphics. In this book, I could only scratch the surface of SVG's enormous capabilities, but I hope that I have been able to impart to you at least some of the essential SVG skills and also help you glimpse the great future that lies ahead of SVG.

Don't be left behind!

CONTENTS