This chapter is from the book
This chapter is from the book
This chapter is from the book
Advantages of SVG
Besides being resolution-independent and using less bandwidth, SVG has a number of other advantages over other graphics standards. One big one is that it uses a "color profile" to render colors more accurately, regardless of browser and monitor differences (even rendering accurately to devices such as PDAs and cell phones). As anyone who has been frustrated by color differences between IE and Netscape can tell you, this is a significant advance for graphics on the Web! We'll cover some of SVG's color capabilities in Chapter 5.
Some of SVG's many advantages are listed below. SVG is:
-
Text-based
-
Open source
-
Written in XML
-
An official W3C graphics standard
-
Accessible for people with visual disabilities
-
Searchable
-
Dynamic and updateable
-
Cross-browser compatible
In addition, SVG:
-
Can be animated
-
Supports filters, transformations, clipping, and masking
-
Supports transparency
-
Text can be selected, copied, spoken by the computer, or indexed.
-
Can be exported from Illustrator, CorelDRAW, WebDraw, etc.
-
Can be exported from Geographics Information System (GIS) software
-
Can be used for print as well as Web graphics
Text-based simply means that SVG, unlike most graphics standards, is coded with simple text. Most graphics standards use binary code, readable only by computers. Text-based code is readable and editable by human beings like you and me. Open sourced means that you don't need to buy any expensive software in order to use SVG. All you need is a simple text editor, such as Notepad or BBEdit, to create and edit SVG graphics.
Because SVG code is text, search engines can index SVG graphics according to what the diagram contains, (such as "image of red circle"), and SVG graphics can be made accessible to people with visual disabilities by means of voice or Braille software, which can use the text description to describe the image.
Because SVG is XML-based, it can (using Perl or Java to convert the data to SVG) render graphics from database data, so images can dynamically update. In other words, your site can contain graphics that change according to the data that is being retrieved. A weather map done in SVG is a good example of this capability.
SVG graphics can easily be animated, made interactive, and styled with CSS and XSL stylesheets. These attributes take SVG's capabilities beyond the scope of any previously existing graphic standard.
SVG versus Flash
When most people think of Web animation, they think of Macromedia's Flash. However, SVG is just as easy to animate because many animation capabilities are written into its code. In fact, many similarities exist between Flash and SVG, such as:
-
Both SVG and Flash (.swf) files are vector-based.
-
Both SVG files and .swf files can be animated.
-
Both currently require plug-ins to view images. However, browsers will soon have SVG viewing capability.
-
Both SVG and .swf files can be zoomed and panned.
-
Both SVG and .swf files can contain sound. However, sound is not currently part of SVG's specifications.
-
Both are scriptable, though Flash's Actionscript is proprietary. SVG can be scripted with Javascript, Java Bindings, and ActiveX controls.
-
Both allow hyperlinking.
-
Both have database connectivity.
So why use SVG? Well, it turns out that SVG has some very distinct advantages over Flash.
First, SVG is open-source code. This means you can easily see, read, and edit the code underlying an SVG image. Flash's code is proprietary, or owned by Macromedia, and therefore is hidden from public view. Viewing Flash code wouldn't do most of us much good anyway, because it is written in binary format, which consists of strings of zeros and ones—not of great use to most flesh-and-blood-based life forms! Which brings us to the second advantage of SVG—it is text-based. So, it is easy to read an SVG file and easy to create one. To make or edit a Flash file, you must have access to Flash software, and even then, you won't be able to read what's really going on under the hood.
However, despite these comparisons, Flash and SVG are not direct competitors. SVG's basis as a subset of XML gives it the ability to do things that Flash can't, such as coordinate seamlessly with other Web standard technologies. Flash is a proprietary, binary-coded application used primarily for Web animation, which it does quite well.