Table of Contents for

The Modern Web

Comparing Vectors and Bitmaps

Vector graphics are made of geometrical shapes formed with a coordinate system; a series of points is plotted on a grid and lines are drawn between them to form the shapes, making them inherently scalable. If I make my grid larger, the same shape is drawn from the same coordinates, but the coordinates are now farther apart so my shape is bigger.

Bitmap graphics are a series of colored pixels laid out in a grid to form an image; if you open an image in Photoshop (or similar) and zoom in, you can see this grid for yourself. All of the common web image formats (JPG, PNG, GIF) are bitmap formats. Resizing a pixel grid means the computer has to use a scaling algorithm to increase or decrease the sizes of the pixels to fit the new space, removing pixels or adding new ones where necessary. These algorithms generally work impressively but are usually better at removing pixels than adding them, which is why a scaled-down bitmap often looks much better than a scaled-up one.

In Figure 7-1, you can see a comparison of the two different graphical approaches as I zoom in on an image. The vector image is crisp and clear, but the bitmap looks fuzzy, as the scaling algorithm had to make some estimates around adding new pixels to accommodate the larger scale.

Figure 7-1. Detail from a scaled-up image in SVG (left) and PNG (right); the SVG is noticeably sharper and clearer.

Vector graphics aren’t suitable for photographic or photo-realistic images, but are great for illustrations such as logos, icons, and charts. Conversely, bitmap graphics are less useful in environments where scaling is common (such as mobile devices) but are much better for photographic images.