Web Programming with HTML5, CSS, and JavaScript

6.11 Vector Graphics

GIF, JPEG, and PNG are formats for bitmap images. As discussed earlier, a bitmap image works with the help of a map that assigns a color to each pixel in the image’s rectangular grid of pixels. If you attempt to resize a bitmap image (by using an img element’s width and height attributes or by zooming in/out), pixels are dropped or added, and those changes can degrade the image’s quality. That’s a problem, and in this section we address that problem by introducing a different type of image file format. With the vector graphics image file format, images are created from mathematical formulas and are not dependent on mapping colors to individual pixels. So if you resize a vector graphics image, the image is redrawn (using ...