chapter what is svg?

What Is SVG?

In simplest terms, SVG, or Scalable Vector Graphics, is avector graphics format intended for use on the World Wide

Web (usually referred to simply as “the Web”). Because SVG isvector, it looks inherently better than standard bitmap graph-ics (the current mainstay on the Web) and allows for muchmore reliable manipulation. You can bend SVG graphics, twistthem, resize them, and contort them to your heart’s contentwithout worrying that you’re losing image quality. BecauseSVG is code-based, you can create and edit SVG using nothingmore than a simple text program. Open an SVG file, and youcan imagine the layout and content of the graphic, just likewhen you look at the HTML code of a Web page.

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

Yet for many designers, the prospect of trying to use abstractcode to create concrete images is a big turnoff. Artists andillustrators rarely sit and “plot” their work line by line. Theysimply draw and edit until they achieve the desired results. Todo this with SVG, you need the right tools and, you may besurprised to hear, you may already know how to use thosetools! Adobe Illustrator, the premier vector image creationprogram, allows you to create SVG files from any vectorgraphic file, while Adobe GoLive allows you to place thosegraphics into a website — all without ever having to look at asingle line of code.

In this chapter, we explain why vector graphics are an impor-tant step forward for the Web, how SVG compares to its chiefcompetition (Flash), and why you would want to use SVGgraphics in your Web designs.

11C H A P T E R

✦ ✦ ✦ ✦

In This Chapter

Graphics on the Web

SVG advantages

Comparing SVG andFlash

✦ ✦ ✦ ✦

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

4 Part I ✦ SVG Overview

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

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

Bitmaps are graphics of convenience in that they work passably well for just aboutanything. 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 nothingmore than a series of pixels. Although you see a picture of a light bulb on a texturedbackground in Figure 1-1, the computer just sees a solid grid of pixels. The computercan’t even distinguish the foreground from the background. All it knows is that cer-tain 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 thepatience 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. Youcan change the size of a bitmap image, but this literally moves the existing pixels inthe 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 vari-ables, 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 graph-ics more drastically than a small touch-up here and there. This runs counter to thecurrent of the fluid, ever-changing Web. Redesign your Web page, and you may findyourself reworking the majority of your images for no other reason than resolutiondependency.

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

5Chapter 1 ✦ What Is SVG?

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 5


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 WebBitmap 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 andheight you save them with is the width and height they must have on yourWeb page. If you do try to stretch the image, even slightly, you will instantlynotice distortion in the image.

✦ Difficult to change: Although bitmap images are relatively easy to edit in abitmap editing program such as Photoshop, they cannot be altered in the Webpage itself. This makes the images highly static with limited possibilities.

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 theseoptions 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, andreplace static bitmap graphics but not to change their content.

Note

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


The vector solutionWhereas bitmaps are created by a grid of pixels, vector graphics contain mathemat-ical representations of the shapes in the image. Each shape in a vector image isdescribed 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 shapefrom 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 ofthe size the image was originally created at. The image retains its razor-sharp edgeeven at obscene levels of magnification. This makes vector graphics perfect forillustrations that do not require photorealistic quality such as technical illustra-tions (see Figure 1-4).

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

If you want to change the shape or size of an object in a vector graphic, the com-puter redraws the object simply by changing the parameters of the mathematicalfunctions, thus retaining the same clarity and fidelity of the original as if you haddrawn it that size to begin with (see Figure 1-6).

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 theimage while minimizing distortion. Although there are numerous formats that bitmapimages can be saved in, most Web browsers will only display graphics saved in three ofthem:

✦ Graphics Interchange Format (GIF): Primarily used for small graphics with largerareas of flat colors.

✦ Joint Photographic Experts Group (JPEG): Primarily used for photographs andother complex images.

✦ Portable Network Graphics (PNG): The new kid on the block can be used in placeof 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.

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


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 8


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

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

✦ Small file sizes: Because large amounts of graphic information can berecorded in a few small formulas, vector graphics tend to be much smallerthan similar bitmap images.

✦ Easy to resize: Because they are based on mathematical formulas, vectorgraphics can be resized simply by changing the parameters given to the for-mulas. The upshot for us non-mathematicians is that you can easily changethe 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 caneasily 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 yousimply want to make them bigger — just change the size of your vector images, andthey scale up. For that matter, why dictate to your audience the size of the graphicson your site? Perhaps others can’t see as sharply as you, the designer. With vectorgraphics, the end user can scale the image to whatever magnification level satisfies,retaining every bit of detail in the process.

What vector cannot doLest you think that vector graphics can completely replace bitmap graphics, theycan’t. Despite the many advantages of using vector graphics for many purposes forwhich bitmap graphics are currently used (such as interface buttons), there aremany images that vector graphics simply cannot reproduce.

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


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

Using software such as Adobe Illustrator, you can convert bitmap photographs intosimplified vector drawings by a technique called tracing, but the results often lookcartoonish, stylized, and unconvincing (see Figure 1-7). For these reasons, bitmapsare still the format of choice for photographic information. Yet even then, vectorgraphics 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 thebest 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.

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 onthe Web was the SWF format. Usually called Flash, after the primary computer soft-ware used to create these images, this vector format was developed by the softwaremanufacturer Macromedia. Needless to say; Flash has been wildly popular on theWeb, responsible for a great number of some of the most creative websites avail-able today, this despite the fact that Flash relies on a plug-in to display its graphicsin Web browsers.

✦ Scalable Vector Graphics (SVG): Scalable Vector Graphics were introduced in thelate 1990s to offer a standardized vector format based on the Extensible MarkupLanguage. Although it currently relies on a plug-in to be used by most Webbrowsers, because it is an open standard created by the World Wide WebConsortium, SVG can be easily incorporated directly into future browsers.

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


SVG AdvantagesSo, why should you want to use SVG format for your website? We have five goodreasons.

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

✦ Smaller file sizes: Because SVG images do not have to store every pixel in theimage, they generally produce smaller file sizes than similar bitmap images.

✦ Easier to edit: Because SVG images are resolution-independent, the image canbe resized or altered without degrading the image quality.

✦ Easier to change: Because SVG images are code-based, they can be dynami-cally changed using programming and scripting computer languages.

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

SVG Advantage 2: It is an open standardUnlike many other graphic formats such as JPEG, GIF, or even SWF, the SVG formatwas created by an independent standards body whose sole purpose was to create avector file format that anyone can use. SVG is a proposed standard of the WorldWide Web Consortium (W3C) based on the existing XML standard (see the sidebar“XML: The Mother of Languages”). As such, during its creation, SVG received inputfrom 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 compleximages such as photographs. Fortunately, SVG provides a workaround. You can link or evenembed external graphic files, including bitmaps, into your SVG, so that photographic infor-mation appears within the display area (called the viewport) with vector information. Thereare two caveats to this approach:

✦ External or linked bitmap graphics are still resolution-dependent. Zooming in on theSVG causes loss of image quality on the bitmap portions.

✦ Embedding bitmap graphics can significantly increase the file size of your final SVGdocument. 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 11


it is an open standard, any software manufacturer can use the guidelines to buildtools for creating SVG graphics. Although this book concentrates on just two ofthese tools (Adobe Illustrator and Adobe GoLive), new tools are coming to the mar-ket 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 theW3C website (www.w3.org/Graphics/SVG) shown in Figure 1-8. Any interestedparty 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 everythingyou need to know (although it may be a bit cryptic in its undigested format).

On January 14, 2003, the W3C released version 1.1 of the SVG standard and a newprofile for using SVG in mobile devices. However, it may be a year or more beforethese 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-friendlyAlthough 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 analien language. Open a bitmap graphic in a text editor, and what you see lookssomething like this, only it goes on for pages and pages:

GIF89a_ ° Õ ??? ___ïïï ¤¤¤¿¿¿000ŸŸŸ@@@___ÀÀÀ ___///ÏÏÏ```àààoooPPPßßß°°°___ppp___¯¯¯

OOOÿÿÿÿÿÿ

Note

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

The only meaningful part of this gibberish, at least to a human, is the very first setof characters, which identifies the image format as GIF89a. The rest isn’t really gib-berish, 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 abitmap 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 humanto edit as text. Consider the example in Figure 1-9. Assume that you have to launchthe Know Your Shapes page in five minutes, and you just noticed that one of yourdesigners mislabeled the image. You don’t have access to the graphics software, soyou can’t make the change visually. Fortunately, you have a text editor, and youinsisted 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 lookslike this:

<flow font-family=”’Myriad-Roman’” font-size=”18”>Triangle</flow>

XML: The Mother of Languages

SVG is a language for describing images in XML, or Extensible Markup Language. XML, inturn, is a computer language for structuring data, or organizing information into logicalgroups that make sense to computers as well as humans. In practical terms, structured doc-uments improve performance, compatibility, and editability, which are three cardinal virtueson 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 applica-tions for specific tasks or purposes. SVG is one of these XML applications, and, in a morelimited sense, so is HTML, the most common markup language on the Web. XML, SVG, andHTML all come from SGML, Standard Generalized Markup Language, a cumbersome, com-plex, and exactingly precise form of computer-speak. SGML is far too complex for practicaluse on the Web. HTML came originally as a drastically limited subset of SGML, and XMLcame as a less drastically but still very streamlined subset. XML is more SGML-like thanHTML, if you prefer, although both share a common ancestor. XML is also the purer SGMLapplication. As Web designers demanded better methods of content presentation, HTMLacquired many proprietary tags and characteristics, few of which have anything to do withSGML.

XML’s role thus far has not been to replace HTML but to augment it with SGML-compatiblehelper applications such as SVG, leaving HTML free to do what it does without rendering itobsolete. 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, ValueChain Markup Language (VCML), Universal Business Language (UBL), and MathML are afew 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).

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

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 howto fix the problem. Change the label to “Square,” the way it should be:

<flow font-family=”’Myriad-Roman’” font-size=”18”>Square</flow>

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

Just because you can edit SVG with a text editor doesn’t mean that you have touse this approach. Most Web designers are far more comfortable working in avisual environment like Adobe Illustrator 10, which offers excellent SVG support.

Tip

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


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

SVG Advantage 4: It provides great accessibilityAnother important benefit of the code-based nature of SVG is that SVG is moreaccessible than other graphics formats in the sense that people with disabilitiessuch as vision impairment can nevertheless derive value from the graphic with theaid of special equipment like text-to-speech or text-to-Braille converters. Assumefor a moment that the image in Figure 1-10 is a GIF file instead of SVG. GIF is abitmap format, so all the information in the image is in the form of pixels. Just asthe computer can’t tell the difference between the foreground and the backgroundin the image, the computer doesn’t know which of the pixels represent the letters ofthe words. The text is completely invisible to the computer in bitmap format, andtherefore the text is completely inaccessible to screen readers and the like. To com-pensate for this problem, designers of accessible websites must explicitly add textequivalents 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 15


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

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

SVG Advantage 5: It can create dynamic contentUnlike bitmap graphics, which, once saved, cannot be easily altered, SVG graphicscan be dynamically changed in response to the Web visitor’s needs, wishes, andwhims:

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 gettinggrease under their fingers and the smell of oil on their face. Some people just want to drivetheir car. They never think about what is under their hood. This principle holds true withmany designers’ attitudes towards working with computers: Some like to muck around inthe 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 deploywebsites. You can create your designs in a graphics editing program such as Illustrator andthen put the pieces together in a WYSIWYG (What You See Is What You Get) HTML editorsuch as GoLive without ever having to sully your hands with HTML tags or JavaScript func-tions. The same is true with any image you create in Illustrator and save in SVG format. Thatsaid, the SVG toolset is still fairly limited, especially when compared to the more matureFlash toolset, and it is still necessary to understand SVG code in order to do certainadvanced dynamic functions and to create filters. However, because this book is for graphicdesigners, we have attempted to keep the code to a minimum and where we have toexpose the code, we have tried to keep it as simple and straightforward as possible.

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


✦ SVG supports animation. You can animate individual objects within an SVGfile, like a drawing of a car or spaceship, as well as the vast majority of theproperties 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 anima-tion, provide interactive feedback like rollover effects and pop-up menus, andgenerate new SVG code on the fly. Scripting also allows you to control HTMLelements and vice versa, so that clicking hyperlinks in an HTML document, forinstance, causes changes in an accompanying SVG.

✦ SVG supports database integration. An SVG template can acquire variablesfrom a database to populate dynamic pages. Plus, because SVG code is text-based, the database can contain straight SVG instead of links to externalgraphics files.

• SVG supports Cascading Style Sheets (CSS). Use CSS styles in concert withscripting or databases to customize the appearance of your SVG according tothe visitor’s personal preferences, cultural preferences, or accessibility needs.

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

Note

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 abrowser plug-in to work on the current generation of browsers. Although the Flashplug-in for SWF graphics is now ubiquitous and preinstalled on most browsers, SVGhas 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 creationtools for graphic designers. Although Illustrator and GoLive support SVG, otherAdobe programs such as LiveMotion (used to create Flash graphics) do not. An evenmore 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. Thegood news is that, if you are already an Illustrator user, learning to create SVG graph-ics only requires a slight modification to your existing skills.

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


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

SVG versus Flash has become yet another point of endless debate among Web peo-ple, with partisans declaring their favorite format absolutely superior to the otherin every conceivable way. A closer look at both formats shows enough differencesto keep them from being head-on competitors in the same way that Netscape andInternet 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 developersto create fully featured Flash animations and applications easily and quickly.There isn’t any comparable SVG tool. Adobe Illustrator and Adobe GoLivemake important advances with regard to SVG authoring, but Flash MX is milesahead, especially when it comes to implementing dynamic features (seeFigure 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 18


✦ Virtually complete market penetration: Macromedia estimates that over 97.8percent of all Web users have some form of the Flash Player plug-in. The FlashPlayer has become so widespread that Web designers include Flash contentas routinely as bitmap graphics on their sites. By the end of 2001, only about10 percent of all Web users had SVG capability. (You can assume that thisnumber has grown, considering that the SVG Viewer is now part of AcrobatReader.) In other words, nine out of ten visitors on your SVG-enhanced sitewill have to stop what they’re doing to download and install a 2MB plug-inbefore proceeding. The short attention span of Web surfers is legendary.Anything that stops their momentum is like permission for them not to visityour 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 itsspecification, 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 theirSVG 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 sophisticatedauthoring 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 orCorelDraw.

✦ Integration in established design software: Although SVG has not beenaround as long as Flash, you can use two of Flash’s tools to create SVG graph-ics. Adobe has integrated SVG capabilities into both its Illustrator and GoLivesoftware. Although you cannot create SVG graphics in a single authoring pack-age (as with Flash) for many graphic designers using Illustrator to creategraphics for the Web will take only a little extra training.

✦ Standards compliance: The developers of SVG have taken great pains to makeSVG compliant with a wide variety of existing standards and technologies,including HTML, JavaScript, and CSS, and the same script can simultaneouslycontrol elements in the HTML and SVG. Flash relies on its proprietaryActionScript scripting language, with minimal support for other languages andstandards.

✦ Extensibility: Because SVG comes from XML, it is inherently more adaptableto particular applications and custom needs.

✦ Accessibility: SVG is more readily accessible to people with disabilities thanFlash. Flash movies require special handling to be accessible, and not allscreen readers support this format. Any text-based accessibility tool workswith SVG.

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


SVG and Adobe

Although SVG is a standard created by the W3C, it has a very influential benefactor: AdobeCorporation. While Adobe downplays its own contribution to the standard, (www.adobe.com/svg/overview/adobeandsvg.html) they have spearheaded much of the effort tocreate an official vector format for the Web. As a result, SVG has already been integratedinto several important Adobe applications (Illustrator, GoLive, and InDesign) and we willprobably 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 workingcommittee 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 20


✦ Built-in filter effects: SVG provides special graphical effects that you can useto create glows, shadows, blurs, and the like. The parameters of these effectsare 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 interactivemovies visually in Flash MX rather than in code with SVG, coupled with Flash’sridiculously high levels of market saturation, make it a difficult format to unseat.But from a technological standpoint, SVG — with its standards compliance andextensibility — represents a formidable challenge, and its better creative optionsoffer 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 stan-dards compliance is a must. This is especially true in the physical sciences whereSVG can dovetail in nicely with existing XML implementations such as the ChemicalMarkup Language for chemistry. Beyond this, technical illustrations and maps willbenefit greatly from the double punch of XML and SVG allowing for text searchableimages 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 graphicdesigners resist even looking at SVG when they already know Flash. But if you are inthis category, picking up this book is a step in the right direction. If you used earlyversions of Flash, you may remember how horribly painful it was to create reallycool results. SVG finds itself in a similar predicament right now, but given time anddevelopment, this technology has great creative potential.

✦ ✦ ✦

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

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

chapter what is svg?

Documents