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 impor- tant 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 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 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 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 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 mathemat- ical 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 illustra- tions (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 com- puter 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.