Structured Graphics
As soon as Web browsers started to be able to display graphics, people wanted it to be possible for something to happen if you clicked on them. Linked images followed, then buttons, and then HTML image maps-first those interpreted by the server (server-side) and then those interpreted by the browser itself (client-side).
Image maps allow the link to depend on where you click in the image. Unfortunately, these image maps are simple lists of very simple objects (circles, squares, and regular polygons) with fixed coordinates. Listing 21.6 shows an example of an HTML client-side image map.
Listing 21.6 A Typical HTML Client-Side Image Map
1: <map name="map"> 2: <area shape="rect" coords="33,78,58,88" href="1.html"> 3: <area shape="circle" coords="164,207,57" href="2.html"> 4: <area shape="poly" coords="146,35,165,69,134,127,123,96, 5: 105,77,69,82,39,81,20,66,19,55,51,54,118,31,0,19474" 6: href="3.html">
As anyone who's tried can tell you, maintaining these kinds of coordinate graphics is a nightmare. Each time the graphics change, you basically have to re-create the image map from scratch (there are a few tools that can read in and modify an image map, but you still have to replace the map in the HTML file).
Now, add to the problem the fact that most graphics are bitmaps. Bitmaps are essentially binary data that represents the color of the dots (pixels) on the computer screen. Because they address specific dots of light, bitmaps are very sensitive to what resolution of screen you are using. For example, I currently have a screen resolution of 1152 × 864 pixels with 65,536 colors. When I want to capture a screen to show it in this book, for technical reasons I have to drop down to 800 × 600 pixels and 256 colors. What looks great at the higher resolution can look absolutely terrible at low resolution, and vice versa. The situation is almost exactly the same if I want to zoom in on a graphic, no matter what the resolution. Sooner or later, using a bitmap graphic will just become a blur of colored blocks as you start to be able to pick out the individual pixels of color. This problem is demonstrated in the grossly magnified digital photograph shown in Figure 21.4.
Figure 21.4 A Photograph magnified so that the individual pixels are visible.
There are many alternative formats for bitmaps (such as TIFF, GIF, JPEG, and BMP, to name just a few). Each of these formats has its own strengths and weaknesses and therefore each has its own special area for which it is most suitable. For vector graphics, there are two competing formats: Windows Metafile (WMF) and Computer Graphics Metafile (CGM).
| Instead of describing individual pixels, vector graphics use primitive objects such as lines and arcs. These objects are described by means of starting points, directions, and lengths (vectors). The display software has to translate this data into something you can see (on a screen or on a piece of paper, for example) which makes vector graphics completely independent of the output device resolution. Vector graphics can be scaled almost endlessly (certainly to the point where what you see no longer makes any sense at all). |
Bitmaps are raster formats that break an image into a grid of equally sized pieces, called pixels, and record color information for each pixel.
There is a third sort of format. Meta formats can contain vector data and a raster image. A Windows metafile (WMF) format file, for example, can contain a bitmap, vector information, and text, with the bitmap forming the major part of the image and the vector and text data being used for annotations.
Vector graphics can easily be expressed in a plain text (ASCII) format. This immediately begs the question of whether they can then be expressed in XML. The answer to that question is a resounding yes and there are several initiatives that are addressing that very idea.