Flash might be wonderful for many graphics tasks, but SVG can do everything Flash can do and more. Plus, it's open source, which makes it easy to take a look. Even Flash addicts might find themselves swayed to try it out. (This article was originally published in the May issue of Plug-In).
SVG seems at first glance to be a solution to the alphabet soup of choices designers face when creating their web graphics. Instead of .pdf, .bmp, .png, .gif, or .swf, designers would use .svg, saving themselves the compromises they would otherwise be forced to make.
Beyond simply creating high-end 2D graphics using XML tags, SVG (Scalable Vector Graphics) also uses CSS for styling, has W3C recommendation, and has the thumbs up of heavy hitters the likes of Adobe, Apple, Canon, Corel, Hewlett-Packard, Macromedia, Microsoft, Kodak, Sun, and Apache. SVG Tag sampling includes Shape Tags, Paint Tags, Text Tags, Filter Tags, Animation Tags, Miscellaneous Tags and more. Circles, filters, special effects and line art are options readily available with SVG. Although it is not recommended for photographs, photos can be embedded into SVG files.
Developers know that vector graphics are resolution independent. That means they are scalable with no loss of quality. The real bonus comes on the disk scale, however. Vector graphics weigh in for less than high-quality raster (pixel) images.
Table 1 SVG, Flash GIF, PNG, and PDF compared.
Feature
SVG
Flash
GIF
PNG
PDF
Vector artwork
Yes
Yes
Yes
Alpha Channel Transparency
Yes
Yes
Yes
Yes
Pixel-Precise Layout
Yes
Yes
Yes
Yes
Yes
Typeface Selection
Yes
Yes
Yes
Typeface Embedding
Yes
Yes
Yes
Yes
Yes
Gradients
Yes
Yes
Yes
Yes
Yes
Masking
Yes
Yes
Yes
Shared Resources (fonts, symbols, text) across multiple files