Introduction to SVG
- Graphics Standards: JPG, GIF, PNG, and SVG
- Advantages of SVG
- SVG and Browsers
- SVG and Viewers
- XML and SVG
- XML and SVG
This chapter is from the book
This chapter is from the book
This chapter is from the book
SVG (Scalable Vector Graphics) is a language 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 possible through bitmapped graphic standards such as JPGs, GIFs, and PNGs.
SVG is a subset of XML, which is rapidly becoming the foundation for all modern Web applications, including Microsoft's .Net platform and other platforms 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.
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.
)
FIGURE
1–1 Bitmapped image is made up of pixels. Pixels look like tiny dots
when viewed close up. This gives bitmap graphics their "jagged" edges.
Because most display devices (such as monitors) are raster devices, a bitmap or raster image just needs to be uncompressed 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 drawbacks 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 forever 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.
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 significantly. 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 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 bitmaps on the Web altogether. Bitmapped images continue to be necessary. Photographic material, for example, cannot be rendered 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.