What Is SVG? 11

03 525727 ch01.qxd 4/29/03 9:44 AM Page 3

CHAPTER What Is SVG? 11

✦✦✦✦ n simplest terms, SVG, or Scalable Vector Graphics, is a Ivector graphics format intended for use on the World Wide In This Chapter Web (usually referred to simply as “the Web”). Because SVG is vector, it looks inherently better than standard bitmap graph- Graphics on the Web ics (the current mainstay on the Web) and allows for much more reliable manipulation. You can bend SVG graphics, twist SVG advantages them, resize them, and contort them to your heart’s content without worrying that you’re losing image quality. Because Comparing SVG and SVG is code-based, you can create and edit SVG using nothing Flash more than a simple text program. Open an SVG file, and you can imagine the layout and content of the graphic, just like ✦✦✦✦ when you look at the HTML code of a Web page.

Better still, the code-based nature of SVG allows for the fullest possible implementation on today’s database-driven, multimedia-rich Web. SVG supports animation and database integration, and, with the help of scripting languages, you can make SVG dynamic.

Yet for many designers, the prospect of trying to use abstract code to create concrete images is a big turnoff. Artists and illustrators rarely sit and “plot” their work line by line. They simply draw and edit until they achieve the desired results. To do this with SVG, you need the right tools and, you may be surprised to hear, you may already know how to use those tools! Adobe Illustrator, the premier vector image creation program, allows you to create SVG files from any vector graphic file, while Adobe GoLive allows you to place those graphics into a website — all without ever having to look at a single line of code.

In this chapter, we explain why vector graphics are an important step forward for the Web, how SVG compares to its chief competition (Flash), and why you would want to use SVG graphics in your Web designs. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 4

4 Part I ✦ SVG Overview

Graphics on the Web In the early 1990s, when the World Wide Web (WWW) was in its infancy, one of its chief deficiencies was the capability to display graphics. This visual void was quickly filled when early Web browsers adapted the GIF and then — slightly later — the JPEG graphic formats, both of which compress graphic information, allowing images to be transmitted more quickly than raw, uncompressed graphics. However, both of these formats share one thing in common: they are both bitmap (also referred to as raster) format.

The problem with bitmaps A bitmap image works like a mosaic, splitting the image into tiny square pixels, too small to be seen easily by the human eye. Bitmap formats are irreplaceable when displaying images such as photographs or visually complex designs.

Bitmaps are graphics of convenience in that they work passably well for just about anything. However, bitmaps aren’t perfect, and in many cases they are less than ideal. Consider editing a bitmap graphic. To the computer, the bitmap image is nothing more than a series of pixels. Although you see a picture of a light bulb on a textured background in Figure 1-1, the computer just sees a solid grid of pixels. The computer can’t even distinguish the foreground from the background. All it knows is that certain pixels have one color value while certain other pixels have another color value, so problems arise when you want to move the light bulb around within the image.

It is possible to separate the light bulb from the background — if you have the patience to carefully select the outline of the light bulb — but this will leave a gap- ing bulb-shaped hole in the image (see Figure 1-2).

The main problem with bitmap graphics is that they’re resolution-dependent. You can change the size of a bitmap image, but this literally moves the existing pixels in the image further apart and the computer has to guess (also known as interpolate) how to fill in the spaces. Although the amount will vary depending on several variables, this will always lead to a loss in image quality, as shown in Figure 1-3.

Resolution dependency is tolerable as long as you don’t have to modify your graphics more drastically than a small touch-up here and there. This runs counter to the current of the fluid, ever-changing Web. Redesign your Web page, and you may find yourself reworking the majority of your images for no other reason than resolution dependency. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 5

Chapter 1 ✦ What Is SVG? 5

Figure 1-1: Bitmap graphics create vividly realistic images perfect for recreating photographs as with the photograph of this light bulb on a textured background.

Figure 1-2: After much work, the light bulb has been selected and separated from the textured background but the bitmap image does not know what was behind the light bulb, so a blank area is left. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 6

6 Part I ✦ SVG Overview

Figure 1-3: Bitmap images are resolution-dependent. If you scale them up too much, you begin to notice the square shape of the pixels.

Bitmap graphics on the Web Bitmap graphics have some special problems when it comes to using them on the Web:

✦ Large file sizes: When compared to the amount of information they contain, bitmap images generate large files that are slow to download. ✦ Difficult to resize: Because they are resolution-dependent, the width and height you save them with is the width and height they must have on your Web page. If you do try to stretch the image, even slightly, you will instantly notice distortion in the image. ✦ Difficult to change: Although bitmap images are relatively easy to edit in a bitmap editing program such as Photoshop, they cannot be altered in the Web page itself. This makes the images highly static with limited possibilities.

Note There are actually two ways to “change” bitmap graphics once they have been dis- played on a Web page: GIF animation and JavaScript. However, neither of these options truly changes the static nature of bitmap graphics. GIF animation does not actually change the graphic; it simply flips through a series of different static bitmap graphics. JavaScript only allows you to move, resize, hide/show, and replace static bitmap graphics but not to change their content. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 7

Chapter 1 ✦ What Is SVG? 7

Web Bitmap Formats: GIF, JPEG, and PNG

Bitmap graphics can be saved in a variety of formats, each with its own strengths and weak- nesses, but all bitmap graphic formats have one primary purpose: to reduce the size of the image while minimizing distortion. Although there are numerous formats that bitmap images can be saved in, most Web browsers will only display graphics saved in three of them: ✦ Graphics Interchange Format (GIF): Primarily used for small graphics with larger areas of flat colors. ✦ Joint Photographic Experts Group (JPEG): Primarily used for photographs and other complex images. ✦ Portable Network Graphics (PNG): The new kid on the block can be used in place of either GIF or JPEG with similar reductive results. The PNG format is the least commonly used, but will be the most important to SVG, because most bitmap images integrated into SVG files will be saved in PNG format.

The vector solution Whereas bitmaps are created by a grid of pixels, vector graphics contain mathematical representations of the shapes in the image. Each shape in a vector image is described by the path of the line in the shape and the content that fills the shape. Since each shape is a separate formula, the program can distinguish one shape from another allowing each to be selected and edited independently.

Describing images mathematically enables vector graphics to be resolution- independent. You can view them at any size and at any level of detail regardless of the size the image was originally created at. The image retains its razor-sharp edge even at obscene levels of magnification. This makes vector graphics perfect for illustrations that do not require photorealistic quality such as technical illustrations (see Figure 1-4).

If you want to move an object, the entire object can be moved as a unit and any parts of the image that where obscured by the object will now be revealed (see Figure 1-5).

If you want to change the shape or size of an object in a vector graphic, the computer redraws the object simply by changing the parameters of the mathematical functions, thus retaining the same clarity and fidelity of the original as if you had drawn it that size to begin with (see Figure 1-6). 03 525727 ch01.qxd 4/29/03 9:44 AM Page 8

8 Part I ✦ SVG Overview

Figure 1-4: Vector graphics allow you to create simplified versions of objects perfect for illustrations where the complexity of the “real-life” object might be distracting. For example, if you were describing the use of a light bulb in a product, the vector image provides a much simpler, clearer, and easier to understand illustration than its photographic counterpart.

Figure 1-5: The light bulb is moved on the background without leaving a hole behind. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 9

Chapter 1 ✦ What Is SVG? 9

Figure 1-6: The light bulb is resized with no loss in quality.

Vector graphics on the Web This radically different way to create and record images allows vector images to overcome the limitations of bitmap images on the Web:

✦ Small file sizes: Because large amounts of graphic information can be recorded in a few small formulas, vector graphics tend to be much smaller than similar bitmap images. ✦ Easy to resize: Because they are based on mathematical formulas, vector graphics can be resized simply by changing the parameters given to the formulas. The upshot for us non-mathematicians is that you can easily change the size of a vector image without affecting the quality of the image. ✦ Easy to change: Because each object is recorded by a separate formula, you can easily write scripts to change the shape and contents of the image dynamically.

With vector graphics on the Web, you don’t have to redraw your Web buttons if you simply want to make them bigger — just change the size of your vector images, and they scale up. For that matter, why dictate to your audience the size of the graphics on your site? Perhaps others can’t see as sharply as you, the designer. With vector graphics, the end user can scale the image to whatever magnification level satisfies, retaining every bit of detail in the process. What vector cannot do Lest you think that vector graphics can completely replace bitmap graphics, they can’t. Despite the many advantages of using vector graphics for many purposes for which bitmap graphics are currently used (such as interface buttons), there are many images that vector graphics simply cannot reproduce. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 10

10 Part I ✦ SVG Overview

Web Vector Formats: SWF and SVG

So why aren’t all graphics on the Web vector-based? There was never a technical reason why vector graphics could not be delivered via the Web, but it took several years before the first truly effective vector graphic formats were available. ✦ ShockWave Format (SWF): The first widespread vector format to be deployed on the Web was the SWF format. Usually called Flash, after the primary computer software used to create these images, this vector format was developed by the software manufacturer Macromedia. Needless to say; Flash has been wildly popular on the Web, responsible for a great number of some of the most creative websites available today, this despite the fact that Flash relies on a plug-in to display its graphics in Web browsers. ✦ Scalable Vector Graphics (SVG): Scalable Vector Graphics were introduced in the late 1990s to offer a standardized vector format based on the Extensible Markup Language. Although it currently relies on a plug-in to be used by most Web browsers, because it is an open standard created by the World Wide Web Consortium, SVG can be easily incorporated directly into future browsers.

The most obvious of these are photographs, which generally require far more complex and subtle image modulations than can be easily achieved with vector. The shapes in photorealistic images are so subtle and varied that they require huge chunks of mathematical information to render them as vectors, which creates file sizes greatly exceeding the most bandwidth-heavy Web bitmap.

Using software such as Adobe Illustrator, you can convert bitmap photographs into simplified vector drawings by a technique called tracing, but the results often look cartoonish, stylized, and unconvincing (see Figure 1-7). For these reasons, bitmaps are still the format of choice for photographic information. Yet even then, vector graphics need not be stymied. Most vector graphic formats allow you to incorpo- rate images saved in a bitmap image within a vector image, which offers you the best of both worlds.

Figure 1-7: The image of the eye on the left is the original bitmap and the image on the right is a vector version created using Illustrator’s Tracing tool. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 11

Chapter 1 ✦ What Is SVG? 11

SVG Advantages So, why should you want to use SVG format for your website? We have five good reasons.

SVG Advantage 1: It is a vector format That “V” in SVG doesn’t stand for Valentine’s Day: it stands for vector, and all of the great advantages and power that comes from using vector are inherent with SVG images. To quickly review, these advantages are:

✦ Smaller file sizes: Because SVG images do not have to store every pixel in the image, they generally produce smaller file sizes than similar bitmap images. ✦ Easier to edit: Because SVG images are resolution-independent, the image can be resized or altered without degrading the image quality. ✦ Easier to change: Because SVG images are code-based, they can be dynamically changed using programming and scripting computer languages.

Of course, this also means that SVG images have the same disadvantages of vector graphics. For example, they are not suited for displaying photographs. But SVG overcomes this problem by allowing you to display bitmap images as part of an SVG image (see the sidebar “SVG + Bitmap”).

SVG Advantage 2: It is an open standard Unlike many other graphic formats such as JPEG, GIF, or even SWF, the SVG format was created by an independent standards body whose sole purpose was to create a vector file format that anyone can use. SVG is a proposed standard of the World Wide Web Consortium (W3C) based on the existing XML standard (see the sidebar “XML: The Mother of Languages”). As such, during its creation, SVG received input from a wide variety of design and programming professionals. In addition, because

SVG + Bitmap

Vector files display vector graphics, which is great for line drawings, but not for complex images such as photographs. Fortunately, SVG provides a workaround. You can link or even embed external graphic files, including bitmaps, into your SVG, so that photographic information appears within the display area (called the viewport) with vector information. There are two caveats to this approach: ✦ External or linked bitmap graphics are still resolution-dependent. Zooming in on the SVG causes loss of image quality on the bitmap portions. ✦ Embedding bitmap graphics can significantly increase the file size of your final SVG document. Linking to external files rather than embedding them, on the other hand, causes a negligible amount of overhead. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 12

12 Part I ✦ SVG Overview

it is an open standard, any software manufacturer can use the guidelines to build tools for creating SVG graphics. Although this book concentrates on just two of these tools (Adobe Illustrator and Adobe GoLive), new tools are coming to the market all of the time and old tools are being updated.

For more details about the SVG standard, you can see it in all of its glory on the W3C website (www.w3.org/Graphics/SVG) shown in Figure 1-8. Any interested party can read this document and make comments to the steering committee. Also, if you want to learn how to create SVG code, this document contains everything you need to know (although it may be a bit cryptic in its undigested format).

Note On January 14, 2003, the W3C released version 1.1 of the SVG standard and a new profile for using SVG in mobile devices. However, it may be a year or more before these updates are reflected in new software tools.

Figure 1-8: The SVG section of the W3C website is full of useful news and information but is mainly for SVG coders rather than graphic designers.

SVG Advantage 3: It is human-friendly Although you may never have to look at the code used to create an SVG graphic, much of its power comes from the fact that if you need to, it will not look like an alien language. Open a bitmap graphic in a text editor, and what you see looks something like this, only it goes on for pages and pages:

GIF89a_ ° Õ ??? ___ïïï ¤¤¤¿¿¿000ŸŸŸ@@@ ___ÀÀÀ ___///ÏÏÏ```àààoooPPPßßß°°°___ppp___¯¯¯ OOOÿÿÿÿÿÿ 03 525727 ch01.qxd 4/29/03 9:44 AM Page 13

Chapter 1 ✦ What Is SVG? 13

XML: The Mother of Languages

SVG is a language for describing images in XML, or Extensible Markup Language. XML, in turn, is a computer language for structuring data, or organizing information into logical groups that make sense to computers as well as humans. In practical terms, structured doc- uments improve performance, compatibility, and editability, which are three cardinal virtues on the Web. It’s no coincidence that industry leaders have embraced XML. XML is so extensible that you can use it to develop customized language sets or applications for specific tasks or purposes. SVG is one of these XML applications, and, in a more limited sense, so is HTML, the most common markup language on the Web. XML, SVG, and HTML all come from SGML, Standard Generalized Markup Language, a cumbersome, complex, and exactingly precise form of computer-speak. SGML is far too complex for practical use on the Web. HTML came originally as a drastically limited subset of SGML, and XML came as a less drastically but still very streamlined subset. XML is more SGML-like than HTML, if you prefer, although both share a common ancestor. XML is also the purer SGML application. As Web designers demanded better methods of content presentation, HTML acquired many proprietary tags and characteristics, few of which have anything to do with SGML. XML’s role thus far has not been to replace HTML but to augment it with SGML-compatible helper applications such as SVG, leaving HTML free to do what it does without rendering it obsolete. In this regard, there is no limit to XML’s usefulness in a wide variety of industries. Chemical Markup Language (CML), Spacecraft Markup Language (SML), NewsML, Value Chain Markup Language (VCML), Universal Business Language (UBL), and MathML are a few of the many XML applications floating through distributed networks these days. For more details on the XML standard, check out the XML section of the W3C website (www.w3.org/XML).

The only meaningful part of this gibberish, at least to a human, is the very first set of characters, which identifies the image format as GIF89a. The rest isn’t really gibberish, of course — it’s the text equivalent of the pixel color values in the bitmap, but it might as well be gibberish. For all practical purposes, it’s impossible to edit a bitmap graphic in text format. You can’t tell what you’re supposed to be editing.

Not so with SVG. It’s a code-based format, which makes it much easier for a human to edit as text. Consider the example in Figure 1-9. Assume that you have to launch the Know Your Shapes page in five minutes, and you just noticed that one of your designers mislabeled the image. You don’t have access to the graphics software, so you can’t make the change visually. Fortunately, you have a text editor, and you insisted upon SVG as your graphics format. Open the SVG file in your text program, and do a quick search for the label “Triangle.” You find a block of code that looks like this:

Triangle

03 525727 ch01.qxd 4/29/03 9:44 AM Page 14

14 Part I ✦ SVG Overview

Figure 1-9: What’s wrong with this picture? Making changes to the content of an SVG file requires nothing more sophisticated than a text editor.

Even if you know nothing else about SVG or coding, surely you can figure out how to fix the problem. Change the label to “Square,” the way it should be:

Square

Then look for the next occurrence of “Square” and change it to “Triangle.” Save the file, and your SVG image is as good as fixed, as Figure 1-10 shows.

Tip Just because you can edit SVG with a text editor doesn’t mean that you have to use this approach. Most Web designers are far more comfortable working in a visual environment like Adobe Illustrator 10, which offers excellent SVG support. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 15

Chapter 1 ✦ What Is SVG? 15

Figure 1-10: Change the text as text in the SVG file, save, and upload your corrected shapes page to the Web.

SVG Advantage 4: It provides great accessibility Another important benefit of the code-based nature of SVG is that SVG is more accessible than other graphics formats in the sense that people with disabilities such as vision impairment can nevertheless derive value from the graphic with the aid of special equipment like text-to-speech or text-to-Braille converters. Assume for a moment that the image in Figure 1-10 is a GIF file instead of SVG. GIF is a bitmap format, so all the information in the image is in the form of pixels. Just as the computer can’t tell the difference between the foreground and the background in the image, the computer doesn’t know which of the pixels represent the letters of the words. The text is completely invisible to the computer in bitmap format, and therefore the text is completely inaccessible to screen readers and the like. To com- pensate for this problem, designers of accessible websites must explicitly add text equivalents for all their images. Accessibility software requires something recogniz- able as text, and pixels by themselves don’t make the grade. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 16

16 Part I ✦ SVG Overview

Do I Have to Know Any Code to Create SVG Images?

The short answer: No. The slightly longer answer: No, but you have more power if you do. The long answer: Some people like to rebuild their own car engines. They like getting grease under their fingers and the smell of oil on their face. Some people just want to drive their car. They never think about what is under their hood. This principle holds true with many designers’ attitudes towards working with computers: Some like to muck around in the code while others just want to make pretty pictures. These days, you do not have to know anything about code in order to design and deploy websites. You can create your designs in a graphics editing program such as Illustrator and then put the pieces together in a WYSIWYG (What You See Is What You Get) HTML editor such as GoLive without ever having to sully your hands with HTML tags or JavaScript functions. The same is true with any image you create in Illustrator and save in SVG format. That said, the SVG toolset is still fairly limited, especially when compared to the more mature Flash toolset, and it is still necessary to understand SVG code in order to do certain advanced dynamic functions and to create filters. However, because this book is for graphic designers, we have attempted to keep the code to a minimum and where we have to expose the code, we have tried to keep it as simple and straightforward as possible.

SVG is code-based, and it’s also text-based. You saw in the previous example that the labels of the image appear as strings of text in the SVG code. Therefore, you don’t have to add additional text equivalence, at least not for the labels. Screen readers can pick up the text inside the SVG and vocalize it or translate it to Braille with no special effort on your part. Purely visual elements still require explicit text equivalence, even in SVG, but you can add this to the SVG code itself — you don’t have to break into the surrounding HTML of the Web page that embeds the SVG, as is the usual modus operandi when bitmaps are involved. The SVG file becomes a potentially accessible unit in and of itself, to be moved or edited as needed without disturbing the surrounding content on the page or compromising the accessibility of the SVG file.

Along the same lines as accessibility, localization and internationalization, or the adaptation of content according to a particular set of cultural preferences (such as spelling color as colour for British audiences or running text vertically instead of horizontally for Eastern cultures), is much easier to implement in SVG thanks to its code-based, text-based nature.

SVG Advantage 5: It can create dynamic content Unlike bitmap graphics, which, once saved, cannot be easily altered, SVG graphics can be dynamically changed in response to the Web visitor’s needs, wishes, and whims: 03 525727 ch01.qxd 4/29/03 9:44 AM Page 17

Chapter 1 ✦ What Is SVG? 17

✦ SVG supports animation. You can animate individual objects within an SVG file, like a drawing of a car or spaceship, as well as the vast majority of the properties and attributes that these objects possess, such as their color, size, orientation, opacity, and visibility. ✦ SVG supports scripting and programming languages, including JavaScript, Java, and Visual Basic. You can write scripts to control the playback of animation, provide interactive feedback like rollover effects and pop-up menus, and generate new SVG code on the fly. Scripting also allows you to control HTML elements and vice versa, so that clicking hyperlinks in an HTML document, for instance, causes changes in an accompanying SVG. ✦ SVG supports database integration. An SVG template can acquire variables from a database to populate dynamic pages. Plus, because SVG code is text- based, the database can contain straight SVG instead of links to external graphics files. • SVG supports Cascading Style Sheets (CSS). Use CSS styles in concert with scripting or databases to customize the appearance of your SVG according to the visitor’s personal preferences, cultural preferences, or accessibility needs.

Note The subject of dynamic, interactive SVG receives thorough coverage in the later chapters of this book. For a taste of dynamic SVG in action, be sure to visit the SVG Zone of the Adobe website at www.adobe.com/svg.

SVG Disadvantages

Lest you get the impression that SVG is the perfect format for all of your Web design needs, we should address the shortcomings of the SVG format. Some of these are only temporary “growing pain” problems, but others are just the nature of the beast: ✦ Plug-in dependent: Both SVG and SWF graphics require the installation of a browser plug-in to work on the current generation of browsers. Although the Flash plug-in for SWF graphics is now ubiquitous and preinstalled on most browsers, SVG has the advantage that it can be directly incorporated into future Web browsers. ✦ Limited tool set: Currently SVG suffers from not having a wide array of creation tools for graphic designers. Although Illustrator and GoLive support SVG, other Adobe programs such as LiveMotion (used to create Flash graphics) do not. An even more massive hurdle will be getting Macromedia to support SVG in Flash, Fireworks, and Freehand. ✦ Learning curve: Like all new technologies, SVG takes some getting used to. The good news is that, if you are already an Illustrator user, learning to create SVG graphics only requires a slight modification to your existing skills. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 18

18 Part I ✦ SVG Overview

Comparing SVG and Flash So far, you may have noticed some similarities between SVG and Macromedia’s ubiquitous Flash (SWF) format. Both formats are vector-based, and both offer animation, multimedia capabilities, and scripting. The most recent developments on the Flash front push this format beyond graphics and animation delivery into the realm of being a multi-user application server, but the heart of Flash is still very much with bringing short, interactive animated movies to the masses.

SVG versus Flash has become yet another point of endless debate among Web people, with partisans declaring their favorite format absolutely superior to the other in every conceivable way. A closer look at both formats shows enough differences to keep them from being head-on competitors in the same way that Netscape and Internet Explorer were competitors in the late 1990s. Flash, in its most recent form, extends its reach well beyond anything in the official SVG specification. Even so, there’s enough similarity between the two formats to warrant a comparison.

Flash’s advantages over SVG include the following:

✦ A mature authoring environment: Flash MX allows designers and developers to create fully featured Flash animations and applications easily and quickly. There isn’t any comparable SVG tool. Adobe Illustrator and Adobe GoLive make important advances with regard to SVG authoring, but Flash MX is miles ahead, especially when it comes to implementing dynamic features (see Figure 1-11).

Figure 1-11: The Flash MX interface is a robust vector editing and animation tool. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 19

Chapter 1 ✦ What Is SVG? 19

✦ Virtually complete market penetration: Macromedia estimates that over 97.8 percent of all Web users have some form of the Flash Player plug-in. The Flash Player has become so widespread that Web designers include Flash content as routinely as bitmap graphics on their sites. By the end of 2001, only about 10 percent of all Web users had SVG capability. (You can assume that this number has grown, considering that the SVG Viewer is now part of Acrobat Reader.) In other words, nine out of ten visitors on your SVG-enhanced site will have to stop what they’re doing to download and install a 2MB plug-in before proceeding. The short attention span of Web surfers is legendary. Anything that stops their momentum is like permission for them not to visit your site! ✦ Rich multimedia: You can add a wider variety of media types to Flash movies, particularly with regards to sound. SVG doesn’t support sound according to its specification, although Adobe’s SVG Viewer can play embedded sound files. ✦ More compact file size: SWF files are generally smaller and less bandwidth- intensive than their SVG equivalents. ✦ Better playback: Flash animations currently play more smoothly than their SVG counterparts.

SVG, on the other hand, offers the following advantages:

✦ Visual or code development: Flash is a binary format, so it’s as incomprehen- sible as a bitmap file when viewing the code. You don’t need a sophisticated authoring system such as Flash MX to create SVG. All you need, at least in theory, is a text editor. SVG may appeal more to coding types for this reason. At the same time, though, you can also create SVG images in Illustrator or CorelDraw. ✦ Integration in established design software: Although SVG has not been around as long as Flash, you can use two of Flash’s tools to create SVG graphics. Adobe has integrated SVG capabilities into both its Illustrator and GoLive software. Although you cannot create SVG graphics in a single authoring pack- age (as with Flash) for many graphic designers using Illustrator to create graphics for the Web will take only a little extra training. ✦ Standards compliance: The developers of SVG have taken great pains to make SVG compliant with a wide variety of existing standards and technologies, including HTML, JavaScript, and CSS, and the same script can simultaneously control elements in the HTML and SVG. Flash relies on its proprietary ActionScript scripting language, with minimal support for other languages and standards. ✦ Extensibility: Because SVG comes from XML, it is inherently more adaptable to particular applications and custom needs. ✦ Accessibility: SVG is more readily accessible to people with disabilities than Flash. Flash movies require special handling to be accessible, and not all screen readers support this format. Any text-based accessibility tool works with SVG. 03 525727 ch01.qxd 4/29/03 9:44 AM Page 20

20 Part I ✦ SVG Overview

SVG and Adobe

Although SVG is a standard created by the W3C, it has a very influential benefactor: Adobe Corporation. While Adobe downplays its own contribution to the standard, (www.adobe. com/svg/overview/adobeandsvg.html) they have spearheaded much of the effort to create an official vector format for the Web. As a result, SVG has already been integrated into several important Adobe applications (Illustrator, GoLive, and InDesign) and we will probably be seeing the format in many others before long. Although Adobe is a prime mover for SVG, this is not to say that there is not broad industry- wide support for the standard. In addition to employees of Adobe, the W3C SVG working committee included employees of Apple, Microsoft, Xerox, Corel, Ericsson, Nokia, Quark, AOL, Kodak, IBM, Sun, Netscape, Hewlett-Packard, Sharp, and, yes, there is even one repre- sentative from Macromedia. Adobe has set up a special area within its website to show off the power of SVG (www.adobe.com/svg/), as shown in Figure 1-12.

Figure 1-12: The Adobe SVG website (www.adobe.com/svg). 03 525727 ch01.qxd 4/29/03 9:44 AM Page 21

Chapter 1 ✦ What Is SVG? 21

✦ Built-in filter effects: SVG provides special graphical effects that you can use to create glows, shadows, blurs, and the like. The parameters of these effects are entirely tweakable and animatable. You can simulate these effects in Flash, but they don’t have the same level of interactivity. ✦ Richer typography: SVG offers more presentation options for text than Flash, and SVG text is more editable.

So, which should you use? For those keeping score, the knockout punches seem to come from the Flash camp, at least as far as designers are concerned. The capability to create interactive movies visually in Flash MX rather than in code with SVG, coupled with Flash’s ridiculously high levels of market saturation, make it a difficult format to unseat. But from a technological standpoint, SVG — with its standards compliance and extensibility — represents a formidable challenge, and its better creative options offer a tantalizing glimpse of the future. If any format poses a threat to Flash’s domi- nance, it could only be SVG.

At first, you will see SVG graphics being used in academic websites where standards compliance is a must. This is especially true in the physical sciences where SVG can dovetail in nicely with existing XML implementations such as the Chemical Markup Language for chemistry. Beyond this, technical illustrations and maps will benefit greatly from the double punch of XML and SVG allowing for text searchable images and maps.

In the creative arena, however, SVG may never catch up to the Flash powerhouse. Because of its far more extensive and mature WYSIWYG toolset, many graphic designers resist even looking at SVG when they already know Flash. But if you are in this category, picking up this book is a step in the right direction. If you used early versions of Flash, you may remember how horribly painful it was to create really cool results. SVG finds itself in a similar predicament right now, but given time and development, this technology has great creative potential. ✦✦✦ 03 525727 ch01.qxd 4/29/03 9:44 AM Page 22