HTML and CSS Reference
In-Depth Information
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
at
table 7.1
for a quick summary, or skip to
section 7.2
and start building the game.
Table 7.1. Major differences between bitmap and vector (SVG). Note that neither has a clear advantage.
Topic
Bitmap
Vector (SVG)
Files
.gif, .jpg, .png
.svg, .ai, .eps
Created with
Pixels
Math equations
Created in programs like
Photoshop, Gimp
Illustrator, Inkscape
When you enlarge images
Image deterioration
No issues
Mainly used for
Websites, photography
Icons, logos
File size
Large
Small
3D usage
Textures
Objects (shapes)
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
).
