SWF v. SVG – Which Should You Choose?

    Matthew David
    Matthew David
    Share

    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.

    675fig1.gif

    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

    What are the main differences between SVG and SWF formats?

    SVG (Scalable Vector Graphics) and SWF (Small Web Format) are both vector-based file formats used for web graphics. However, they have significant differences. SVG is an open standard developed by the World Wide Web Consortium (W3C), making it widely supported across all modern web browsers. It is XML-based, meaning it can be edited with any text editor and can be searched, indexed, and scripted. On the other hand, SWF is a proprietary format developed by Adobe. It is primarily used for multimedia, vector graphics and ActionScript in the Adobe Flash environment. Unlike SVG, SWF is not text-editable and requires specific software to create or edit.

    Can I convert SWF files to SVG?

    Yes, it is possible to convert SWF files to SVG. However, the process can be complex due to the differences in the two formats. There are online tools and software available that can assist with this conversion, but the results may vary depending on the complexity of the SWF file.

    Why should I choose SVG over SWF for my web graphics?

    SVG has several advantages over SWF. Firstly, SVG is an open standard and is widely supported across all modern web browsers without the need for plugins. Secondly, SVG files are XML-based, meaning they can be edited with any text editor and can be searched, indexed, and scripted. Lastly, SVG files are typically smaller in size compared to SWF, resulting in faster load times for your web pages.

    Are there any disadvantages to using SVG?

    While SVG has many advantages, it also has a few disadvantages. SVG files can be more complex to create and edit compared to other image formats. Additionally, while SVG is supported by all modern browsers, older browsers may not fully support it.

    Can I use both SVG and SWF on my website?

    Yes, it is possible to use both SVG and SWF on your website. However, it’s important to note that SWF requires a Flash player, which is no longer supported by many modern browsers. Therefore, it’s generally recommended to use SVG for better compatibility and performance.

    How can I create SVG files?

    SVG files can be created using a variety of tools, including Adobe Illustrator, Inkscape, and online SVG editors. You can also write SVG code directly using a text editor if you are familiar with the SVG syntax.

    Is it possible to animate SVG graphics?

    Yes, SVG supports animation. You can animate SVG graphics using CSS, JavaScript, or SMIL (Synchronized Multimedia Integration Language). This makes SVG a powerful tool for creating interactive web graphics.

    Can I use SVG for responsive web design?

    Yes, SVG is an excellent choice for responsive web design. Because SVG graphics are vector-based, they can scale to any size without losing quality, making them ideal for responsive design.

    How can I optimize my SVG files for the web?

    There are several ways to optimize SVG files for the web. You can minify the SVG code, remove unnecessary metadata, and use gzip compression. There are also online tools available that can automatically optimize your SVG files.

    Can I embed SVG directly into my HTML?

    Yes, one of the advantages of SVG is that it can be embedded directly into your HTML. This allows you to style and animate the SVG using CSS and JavaScript, and it can improve the performance of your web page by reducing HTTP requests.