Unlike bitmapped images, vector images are not made up of pixels. Rather, they are made up of geometric objects (known as geometric primitives), such as points, lines, curves, and shapes, each of which can be defined in terms of a series of connecting points and/or mathematical expressions. A line, for example, is produced by connecting two points and a curve is produced by a mathematical equation. Figure 6.27 shows an illustration of how an “H” might be represented.
Looking at the figure, it is easy to imagine that a more complex vector graphic would comprise many more points, as shown in Figure 6.28. The figure shows a relatively complex vector graphic, which is actually one object created by connecting many points (node points).
Storing only the coordinates of the objects and a few other properties that make up vector images means that vector image files are seldom large in size, making the method an effective way of producing good-quality digital images that are small in size. Also, because they are stored as a series of coordinates, they can be scaled, translated, and deformed easily by simply manipulating the node points. This means that they are very scalable (i.e., they can be enlarged without loss of image quality). Furthermore, their quality is independent of display device resolution, meaning that they can look good on displays of any resolution. Also, being small in size particularly makes vector images “Internet friendly,” in that they download fast. Figure 6.29 shows examples of vector images. Image “A” is made up of many curves and color fills, and image “B” is a good example of how vector graphics can be used to create complex, highly detailed, and artistic graphics. The image, which is a digital reproduction of Alponse Mucha’s F. Champenois
Imprimeur-Editeur, is made up of numerous curves, shapes, shades, and effects, using a tool called Gradient Mesh, which allows the easy manipulation of curves.
Some of the performance benefits of vector images are reduced by the fact that they still typically have to be saved in bitmapped file formats in order to use them on Web pages. An alternative to doing this is to save them in a vector-based format, such as SVG, mentioned earlier. SVG is both a vector graphics language and a file format, such that when a vector graphic is saved, it is also saved in the language, which a browser is then able to translate into a vector image and display. However, the use of SVG is not yet widespread, as of time of writing.
Another alternative to saving vector images as bitmapped is to save them in Flash file format, SWF, which is another vector-based format. However, a Web browser needs a plug-in in order to be able to display a vector graphic saved in the format. Furthermore, the popularity of the format has decreased, and this is unlikely to change, going into the future.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.