HTML and CSS Reference
After completing this chapter on SVG, you'll be ready to build your own SVG applications,
use SVG inside HTML documents, and take advantage of SVG's CSS support. To get star-
ted, let's review the pros and cons of vectors.
7.1. How bitmap and vector graphics compare
Resizable files such as SVG use vectors (mathematical equations that create shapes) in-
stead of bitmaps (arrays of image data), letting you change the height and width of an im-
age without degrading its quality. Although vector graphics may seem like a replacement
for all graphics, they bring with them several issues. If you're familiar with the differences
between bitmaps and vectors, this section might be a review for you; if you'd like, glance
Table 7.1. Major differences between bitmap and vector (SVG). Note that neither has a clear advantage.
.gif, .jpg, .png
.svg, .ai, .eps
Created in programs like
When you enlarge images
Mainly used for
As the dominant form of computer graphics on the web, bitmap has been ruling with .gif,
.jpg, and .png formats. Opening a bitmap in a text editor reveals data for every pixel in an
image. Because a fixed number of pixels are individually declared, bitmaps suffer from im-
age deterioration when you increase the size. When it comes to resizing, SVG has a clear
advantage because it doesn't pixelate images when you enlarge them (see figure 7.1 ).