Vector Graphics to Complement Bitmap Graphics
This section presents bitmap and vector graphics and discusses how they
complement each other to deliver comprehensive graphics capabilities across a
variety of applications.
Bitmaps are made up of a rectangular matrix of pixels. These pixels are
assigned integer values that determine their state. The state of a pixel
determines its shade of gray or color in a grayscale or color bitmap image,
respectively. For example, Figure 12.1 shows a simple bitmap with a diagonal
line composed of a set of dark pixels.
Color bitmap images may be composed of multiple component bitmap images
for each of the primary colors—red, green and blue. Bitmap images are typically
represented in binary format and are not readily editable with text editors.
There is typically a high cor-relation between adjacent pixels in a bitmap
image because nearby pixels typically have similar intensities or colors.
Consequently, a large amount of redundancy exists in bitmap images, which
typically makes bitmap images in their raw form inefficient graphical
rep-resentations. Therefore, uncompressed bitmap images can be relatively large
in terms of file sizes. Without degradation, “lossless” compression can
typically achieve a compres-sion factor of approximately two times. On the
other hand, with degradation that is insignificant to a human viewer at a
normal viewing distance, “lossy” compression typi-cally achieves a compression
factor of up to 10 times. Bitmap graphics on the Web include GIF and JPEG
images for which there is broad support among Web browsers. GIF bitmap images
support “lossless” compression, whereas JPEG bitmap images sup-port both
“lossless” and “lossy” compression. Photos lend themselves well to
representa-tion in the bitmap graphical format.
Aside from photographs, many other applications lend themselves better
to an alterna-tive graphical representation, called vector graphics. In this representation, graphics are composed of
graphical primitives, including lines and text. For example, Figure 12.2 shows
a simple vector graphics diagram with a diagonal line defined by its start and
end-points (sx,sy) and (ex,ey), respectively. This is the vector diagram equivalent of the bitmap
diagram shown previously in Figure 12.1.
Vector graphics information is kept symbolic rather than in a flat pixel
format. Vector graphics files are typically represented in a text format, such
as XML, and are therefore easily editable using a simple text editor. Because
information is kept symbolic in vector graphics, these types of graphics may be
easily manipulated. This makes them well suited to interactive applications.
Examples of manipulations that are easily achievable with vector graphics
include scaling, rotating, and panning. Furthermore, scaling does not result in
pixelation (or “blockiness”), as is the case with bitmap images, when one zooms
in too far. Instead of representing graphics in a flat, exhaustive format like
bitmap graphics, which without compression has the same size regardless of
content, vector graphics more efficiently represent graphics from graphical
elements. Consequently, vec-tor graphics may be very efficiently represented
and are therefore easily stored and downloaded. In a Web application, this
leads to faster client response time, less network and server load, and less
storage requirement on the server side.
It is notoriously difficult to extract meaning from bitmap graphics.
Vector graphics, on the other hand, contain primitive elements, including text
from which meaning may eas-ily be extracted in an automated fashion. This is
particularly true of XML-based vector graphics formats, which not only leverage
the power of vector graphics but also the standard well-formed structure of XML
that enables them to be processed efficiently, robustly, and in an automated
fashion. Bitmap graphics are difficult to reduce. In extract-ing subsections of
bitmap graphics, users are typically forced to use simple rectangular cropping.
On the other hand, you can easily reduce the vector graphic by identifying and
extracting the primitives that constitute the desired subsection of the
Raster displays, such as those used for televisions and computer
monitors, are made up of a matrix of pixels. Therefore, bitmap images may be
readily displayed on them, in some cases with subsampling or supersampling to
change their size. Vector graphics, on the other hand, don’t define the pixels
to be displayed directly but rather how to compute them from a set of primitive
graphics elements, including lines and text, for example.
Complementary Bitmap and Vector Graphics
Photos are best represented in bitmap format, typically with either
lossless or lossy com-pression. Most other types of graphics are best
represented as vector graphics. However, due to the early Web browser support
for bitmap formats (in particular, GIF and JPEG formats), most Web content does
not make use of vector graphics, even in applications traditionally dominated
by vector graphics (for example, mapping). A good example of this are the map
Web sites, such as MapBlast (www.mapblast.com) and MapQuest (www.mapquest.com), that enable users to retrieve and view maps in bitmap format over the
Internet. Due to the use of bitmap graphics, a simple manipulation such as
zooming in on the map results in a new request to the server and a whole new
image being down-loaded. In contrast, the use of vector graphics in such
applications would enable such transformations to be achieved on the client
side without further server requests. One of the main reasons for the use of
bitmap graphics in these types of applications is the lack of vector graphics
formats widely supported on the client side, such as by the major Web browsers.
SVG promises to address this issue by delivering the power of vector graphics
in a widely supported standard XML-based format that may be easily applied to
power a variety of interactive graphical applications on the Internet. Although
the previous clear distinction drawn between bitmap and vector graphics is
convenient from a conceptual standpoint, in practice they are not mutually
exclusive. For example, vector graphics may be composed of graphical
primitives, including embedded bitmap image subcomponents. On the Web and
across all practical graphical applications, bitmap and vector graphics will be
used together as well as in combination with each other in various hybrid