Introduction to SVG

PH055-Pearlman.book Page 1 Monday, December 23, 2002 6:58 AM 1 Introduction to SVG IN THIS CHAPTER • Graphics Standards: JPG, GIF, PNG, and SVG • Advantages of SVG •SVG and Browsers •SVG and Viewers •XML and SVG VG (Scalable Vector Graphics) is a language S based on XML (Extensible Markup Language) for creating two-dimensional images on the Web. It is both vector- and text-based, combining graphics with programming to control Web images in a way not pos- sible through bitmapped graphic standards such as JPGs, GIFs, and PNGs. SVG is a subset of XML, which is rapidly becom- ing the foundation for all modern Web applications, including Microsoft’s .Net platform and other plat- forms by Sun and IBM. Getting to know SVG now will keep you on the cutting edge of Web development! SVG, with its animation and interactive capabilities, is well poised to become the future of Web graphics. 1 PH055-Pearlman.book Page 2 Monday, December 23, 2002 6:58 AM 2 Chapter1•Introduction to SVG SVG is also a World Wide Web Consortium (W3C) standard, which allows it to integrate with other W3C standards. For the Web developer, this makes it very easy to incorporate SVG into Web sites and helps to ensure compatibility. In this chapter, we will introduce you to SVG and tell you a little bit about its advantages as a graphics standard, how it compares with similar Web technologies, such as Flash, how browsers deal with SVG, and some of SVG’s important capabilities. We will also discuss current and future options for viewing SVG and will cover downloading Adobe’s SVG viewer. A viewer is essential for looking at SVG graphics at this time, because browser support for it is limited. We will also show you a bit about XML, SVG’s parent language, and we finish the chapter by creating and modifying our first SVG graphic file. So let’s get started! Graphics Standards: JPG, GIF, PNG, and SVG Bitmap Graphics Most graphics you see on the Web are bitmap (also called raster) images. Bitmap images are basically thousands of tiny pixels, each of which carries information about color. A pixel is like a tiny dot. If you’ve ever looked at a television screen or a magazine image up close, as demonstrated in Figure 1–1, you’ve seen that the image looks as though it is made up of a lot of scintillating little dots. Those are pixels. Because most display devices (such as monitors) are raster devices, a bitmap or raster image just needs to be uncom- FIGURE 1–1 bitmap.gif. Bitmapped image is made up of pixels. Pixels look like tiny dots when viewed close up. This gives bitmap graphics their “jagged” edges. PH055-Pearlman.book Page 3 Monday, December 23, 2002 6:58 AM Graphics Standards: JPG, GIF, PNG, and SVG 3 pressed to be viewed onscreen. Some common bitmap graphics used on the Web are: • GIF (Compuserve Graphics Interchange Format), a lossless compression format. A lossless format does not lose data when compressed. GIFs were created to be relatively small in bandwidth and are still the most popular bitmap graphic format on the Web. Unfortunately, their quality is usually not great, as you can see by browsing enough Web sites! • JPG or JPEG (Joint Photographic Experts Group), a lossy compression format. Lossy formats lose data when compressed. JPGs were created specifically for photographic images or images that require a lot of detail. They work by saving a complete black and white version of the image and some of the color information. JPGs are called a lossy format because they lose some color data in order to save on file size. • PNG (Portable Network Graphic), a lossless and well- compressed format created to solve some of the draw- backs of GIFs and JPGs. Because they are lossless, they result in somewhat better resolution than JPGs, but they are often much larger in file size. As anyone who surfs the Net knows, when you see images on the Web, there is usually a real tradeoff between quality and download time. High-resolution bitmapped images take for- ever to download on a slow connection, but faster, lower resolution bitmapped graphics are usually pretty low in quality. Also, bitmapped images do not scale well, which means that if a bitmapped image is scaled to a larger size, at some point it will lose resolution and crispness because its pixels will increase in size, giving it a bumpy, jagged look (Figure 1–2). FIGURE 1–2 On the left, we see a JPG image of a cube, on the right we see it scaled up. Notice the bumpy, fuzzy look. PH055-Pearlman.book Page 4 Monday, December 23, 2002 6:58 AM 4 Chapter1•Introduction to SVG Vector Graphics Vector images are based on mathematical formulae and a coordinate system. Therefore, they are not limited according to pixel size, as are bitmapped graphics. Remember plotting points on a graph in high school algebra? Vector graphics use a similar coordinate system to create shapes. Roughly, a vector image takes a series of coordinate points plotted on a graph and contains instructions to the browser on how to render those points as an image, using curves, straight lines, etc. Vector graphics have many advantages over bitmapped graphics. They scale well, retaining their resolution at any size and with any change of the viewing device. This is especially important with the wide variety of screen sizes and devices, such as cell phones and PDAs! Take a look at a vector image of a cube, shown in Figure 1– 3. On the left, the cube is small, and on the right, the same vector cube is scaled up to a comparable size with the JPG file in Figure 1–2, which is an image that loses resolution signifi- cantly. Note that, because vector graphics are based on mathematical formulae, the increase in size means that the formulae are multiplied in proportion, and the shape still redraws and renders crisply. FIGURE 1–3 On the left is a vector image of a cube, and on the right it is blown up several times. Note that the resolution stays pretty much the same. Most bitmapped graphics, in addition to not scaling very well, often render differently on different client browsers. (The exception to this is the PNG graphic format, which uses gamma correction to control its own brightness and will, therefore, render the same on different browsers.) This can cause PH055-Pearlman.book Page 5 Monday, December 23, 2002 6:58 AM Advantages of SVG 5 difficult design issues, because an image may look one way in Internet Explorer (IE) 4 and another way in Netscape 6. Bitmap images are also relatively large in bandwidth. A bitmapped image with a high resolution will be a very large file when compared with a similar vector image, which will be a much smaller file. Of course, this is not to say that we can just get rid of bit- maps on the Web altogether. Bitmapped images continue to be necessary. Photographic material, for example, cannot be ren- dered adequately by vector formats, so don’t toss out all your JPGs! Fortunately, you can embed inline JPEG or PNG graphics in SVG files, so you’re by no means limited to vector art. This makes the creation of sophisticated graphics with SVG quite easy. 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 PH055-Pearlman.book Page 6 Monday, December 23, 2002 6:58 AM 6 Chapter1•Introduction to SVG • 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.

Load more