SWF v. SVG – Which Should You Choose?

It used to be that a Website only needed good content to be cutting edge. Now any decent site will use rich multimedia to engage and retain visitors. There are two primary multimedia solutions you can use: Macromedia’s Flash, or the Structured Vector Graphics format, also known as SVG.

The technology behind both these formats is not new. It’s a graphics format called Vector. The difference between conventional Web graphics (such as those annoying animated GIFs) and vector graphics is how the final graphic is created. GIF and JPEG graphics raster graphics — each image is create pixel by pixel. On the other hand, vector graphics use mathematics to build the graphic. The program plots point A, point B and point C, fills a color into the space created, and voila! You have a triangle. Typically, Vector graphics are much smaller in file size that traditional GIF and JPEG graphics, which has made Vector programs such as Flash very popular — over 380 million people have downloaded the Flash plugin to date.

Flash is the dominant Vector graphics program on the Internet. Millions of users access thousands of sites powered by Flash each day. Unlike HTML, which is, by its nature, a static language, Flash is dynamic and designed specifically to engage the user. If this was not enough, each Flash movie is typically very small, enabling CD-ROM-like experiences over slow dial-up Internet connections. The success of Flash can be seen through the evolution of the online ad industry, as Flash advertisements begin to replace annoying blinking animated GIFs. The result is a richer, more engaging and creative advertising solution. Examples of Flash advertising can be seen at popular sites such as weather.com, SciFi.com and News.com.

However, Flash isn’t the only Vector graphics format on the market. There is also SVG, the Structured Vector Graphics format: an XML-formatted, scriptable graphics format. SVG does not share Flash’s ubiquitous presence on the Web. Its strengths come from its supporters and backers: Adobe and the World Wide Web Consortium group, or W3C. Adobe is a massive power shop that has the market for illustration and graphics management programs cornered. The W3C is headed by the man who single-handedly created the World Wide Web, Tim Berners-Lee, and who has established standards such as HTML, Cascading Style Sheets and XML. SVG is a strong contender for the Vector graphics crown. Examples of sites using SVG include DBx Geomatics.

But which is better? SWF or SVG?

The creation process

The speed with which standards come and go on the Web is astounding. Anyone remember Web channels? That came and went within 6 months back in ’97. It didn’t last because the tools required to build Web channels hadn’t been created. Users had to code channels by hand, which meant that most users couldn’t access the technology. Obviously, for a new concept to work, users must be provided with tools that allow them to easily access the full power of the technology.

Macromedia have followed this philosophy with Flash. To begin with, they’ve built Flash into many of their products. Flash is the only product that completely exposes all functionality, which not only includes graphics and animation, but access to a powerful scripting engine within Flash called ActionScript. To supplement Flash are Freehand and Fireworks, two Web-centric graphics programs that natively export images in the Flash format. In addition, Macromedia’s Dreamweaver also produces custom Flash text and buttons for Websites.

That’s great, but not everyone likes to work with products from just one company. To allow additional companies to support the Flash file format, Macromedia gave away the source code needed to create a Flash movie. The success of this move has been huge. Now, all the major graphics tools, including Adobe Illustrator and Corel Draw, export natively in the Flash format.

Third party software that exports to Flash movies has also begun to spring up. Over 50 different programs now create files that are Flash-enabled. This includes products that create animated text, 3D Flash sites and enhanced animation, as shown in Figure A.

In comparison, SVG is still a new contender. SVG is based on XML, the eXtensible Mark-up Language, which means that it can be very easily scripted. The following code is SVG for a rectangle.

<?xml version="1.0" standalone="no"?>  

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"  

 "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  

<svg width="500" height="500">  

 <rect x="111" y="78" width="187" height="160"  

 style="fill:rgb(192,192,255);stroke:rgb(0,0,128);stroke-width:1"/>  

</svg>

At first glance this may look complicated, but to an XML developer the code makes perfect, simple sense. By obeying a few rules identified by the svg10.dtd file, any SVG graphic can be created using only humble Notepad.

With XML at its core, SVG’s file format is more open to programmers, which is great. The only problem is that most designers are not programmers.

That said, programs that export files in the SVG file format are now emerging. The most popular is Adobe’s Illustrator 10. Adobe has placed a massive stake in the ground with SVG (you can visit their SVG centre here), with many of their products already supporting SVG. Beyond this, there are about a dozen additional graphics tools that export to SVG, such as Beatware’s e-Picture 2.0, Corel Draw 10 and ITEDO’s IsoDraw 5.0.

Audience — The Holy Grail

Both SVG and Flash are growing and maturing as products. Both are scalable to small computer devices, such as Palm Pilots, and robust enough to be part of Websites that receive millions of hits. But there has to be a bottom line, and it simply comes down to this: the Flash player is pre-installed on most operating systems and is accessible to greater than 97% of the people who use the Web; the latest version of Adobe’s SVG viewer only became available at the beginning of November 2001, and still has a limited penetration rate. In addition, viewing SVG files requires the download of a hefty 2.3 Mb plugin (as currently there are no Web browsers that natively support SVG). This is large when compared to the 219 Kb plugin for Flash.

Even though SVG is based upon the successful XML format, it currently has a very limited user base. The single reason for creating a Website is to allow the greatest number of users to interact with your content — if they can’t see it, they won’t be bale to interact with it.

While SVG does show some great promise and may well be an exciting technology, the current limits to its penetration mean that, for the foreseeable future, Flash will remain the most popular and viable vector program.

Frequently Asked Questions on SVG and SWF Formats