Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






SVG On the Rise

by Dean Jackson
06/06/2002

Editor's Note -- Our aim with the O'Reilly Web DevCenter is to provide readers with balanced coverage of valuable Web technologies -- both open source and proprietary. More and more that line is blurring, such as with Adobe GoLive 6, a shrink-wrap application that incorporates open source tools such as Apache and PHP.

Recently we published an article, SWF Is Not Flash, that highlighted the virtues of Flash technology, a product of Macromedia. The XML community has responded with this thoughtful article about the strengths of SVG. We hope you enjoy, and we encourage you to participate in, this ongoing conversation about vector graphics.

SVG -- vector graphic of the future (the future is now)

Jacek Artymiak's article, SWF Is Not Flash, was an attempt to clear up some misconceptions about Flash and its file format, SWF. This article continues the discussion of formats for vector graphics on the Web, concentrating on SVG. I'll examine some of the questions people ask when deciding what graphics format to use, such as support in user agents, authoring tools, and integration with other standards.

Along the way, I'll expand on some points Jacek raised, taking the opportunity to explain aspects of SVG that may not have been clear. And just as Jacek admitted a bias to SWF, my involvement with the SVG Working Group will no doubt lead me to having a complementary position in favor of SVG.

A short SVG history

Before we start, I want to take a higher-level look at the world of vector graphics on the Web. Over the past few years, there has been a demonstrated interest in vector graphics and animation on the Web. In 1999, the World Wide Web Consortium (W3C) started developing an open format called Scalable Vector Graphics (SVG). The SVG 1.0 Specification, which the W3C published in September 2001, offers the same graphics and animation functionality as Macromedia's SWF, as well as some additional features.

As an XML application, SVG 1.0 is more integrated with other Web technologies than SWF. The SVG 1.0 Recommendation has significant support from industry (Adobe, Apple, Canon, Corel, Hewlett-Packard, Macromedia, Microsoft, Kodak, Sun and many others contributed to the specification).

The SVG Working Group continues to promote SVG by developing new features at the request of the Web community, assisting developers through releasing test suites and developing profiles for mobile devices.

SVG Essentials

Related Reading

SVG Essentials
By J. David Eisenberg

As SVG's popularity grows, you may face a choice between SVG and other formats, such as SWF. In the remainder of the article, I will go into more detail discussing some of the features of SVG as well as the current and projected state of authoring-tool and user-agent support.

SVG is winning friends everywhere

I'm sometimes amazed at the level of positive feedback I see from developers starting to use SVG. Some of the reasons for this are described later, for example conformance and integration with other standards. And it's not just the developers that are impressed; industry players have also shown their support through participation in the creation of the standard, software development, and distributing SVG content. However, Jacek stated that SVG is still waiting to be generally accepted (as in being supported out of the box by all major browsers). I want to address this in three ways.

First, the SVG standard itself been accepted. The W3C membership voted to declare SVG a W3C Recommendation (the glowing testimonials from industry heavyweights are available, and the older ones are interesting reading as well).

To get this far it had to go through a complete implementation test (i.e., every feature in SVG had to be implemented in a viewer) and multiple calls for public feedback. When you have a collection of competitive companies creating a standard they agree on, making it open to everyone, and then racing each other to implement it in products, you have acceptance.

Second, people can and are viewing SVG content. There are a large number of different SVG viewer implementations. The most popular is the Adobe browser plug-in/ActiveX control. Adobe has released its viewer on all the versions of Windows that Microsoft supports (98, 2000, Millennium, and XP), Macintosh OS versions 8.5 to X, Linux, and Solaris. It runs in Internet Explorer, Netscape, Mozilla, Opera, and many other browsers.

As for other implementations, there is already a Mozilla project implementing SVG as part of the browser. As far as I know, this is the only popular vector format natively supported by a browser. Another very complete implementation is the Apache Batik project, which is open source. More information on the subject of viewer implementations can be found in Antoine Quint's article SVG: Where Are We Now?. Of course, that article is a Web year or two old by now. Things are constantly improving.

What about distribution? Adobe has publicly stated a distribution for the Adobe SVG viewer in excess of 150 million, and that is just one of the many SVG implementations around today. If you didn't already know, the Adobe SVG viewer is bundled with Adobe Acrobat Reader, and will be bundled with Real Player in the future.

Third, authoring tools are available. There are some great desktop tools for authoring and/or exporting SVG already available, including Adobe Illustrator, Jasc WebDraw, CorelDraw!, ILOG JViews; MayuraDraw -- the list of tools is growing. However, it is fair to say no one tool yet that matches the popularity of Macromedia Flash. Since this represents a huge opportunity for tools developers, and the standard is now well known, we're more likely to see a flood of SVG authoring tools from a variety of vendors. (As an aside, if Macromedia Flash exported SVG today, it could be one of the best SVG authoring tools in existence.

This is the area in which support for SVG needs to grow, but traditionally it is the area that takes the longest to grow. Also, don't forget that every text editor, such as Notepad, emacs or vi, is already an SVG authoring tool. You could also use the XML editor of your choice for editing SVG, ensuring your image is well-formed XML.

On the server side, the applications for generating SVG content are coming fast. Three examples are Adobe AlterCast, Apache Batik (free and open source), and Corel deepwhite.

What about the Web community? There is a growing SVG community out there. If you are looking for a well-informed forum for the discussion of SVG, I recommend the svg-developers list at Yahoo! Groups. There is also an SVG conference in July -- another sign of acceptance. The popularity of SVG is growing, and becomes stronger with every new implementation.

Human readable is useful to developers

Jacek says that graphics need not be human readable. My take on this subject is quite simple -- being human readable is one of the best features of SVG. Why? Would today's Web be anywhere near as interesting if developers were not able to do a "View Source" on an HTML page and read the result?

From the earliest days developers have been examining existing HTML and JavaScript to learn how to write new content, to make improvements, and to develop a better Web. SVG is intentionally following the same model.

Flash designer Joshua Davies of Praystation.com fame releases some of his source code and developers all over the world love it (the results are delivered as a non-human, readable binary format). Intentionally, every SVG graphic has its source visible and is human readable. Power to the developers through "View Source."

Not only does human readability have benefits for content creators and developers, it has enormous benefits to accessibility. Jacek asks: "Is staring at the SVG code going to make the message that the image is carrying easier to understand?" The answer is a resounding yes! The text within an SVG image is just that: text.

Anyone can read the text, where it is located, and how it will be rendered by simply looking at the source. An image described as four wheels, a body, some doors, and seats is probably a vehicle of some kind. Someone that has trouble seeing the image, for whatever reason, has a chance at finding the meaning by reading the source. Another example: user style sheets. Suppose users cannot view a graphic because they are color-blind. Since they can read the source, they can easily write a user style sheet to override the colors in the graphic.

Pages: 1, 2

Next Pagearrow