What Are Vector Graphics?

What would the world be like if we didn't have both vanilla and chocolate ice cream? We'd probably all be a few inches smaller around the waist, right? Seriously though, just as there are two main flavors of ice cream, there are also two main flavors of computer graphics. One is pixel-based (these graphics are also referred to as rasters or bitmaps) and the other is vector-based (also referred to as object-based). Pixel-based graphics and vector-based graphics are different conceptually and each have its own strengths and weaknesses. For example, Photoshop is a program that is primarily geared to working with pixel-based images and is great for photographic content. Illustrator, on the other hand, is primarily a vector-based drawing application and excels in creating illustrations.

In addition, just like a vanilla-and-chocolate-swirl ice cream cone, an image can contain a mixture of both pixel- and vector-based information. In Illustrator, you can draw a shape, which is a vector, and then apply a soft drop shadow, which is a raster. In fact, you'll find that more and more today, graphics files contain a mixture of both vector and raster content (Figure 2.1).

Figure 2.1. An example of a file that contains both vectors and pixels. In this case, the text is a vector, but the soft drop shadow is a raster.

Once you've learned how these two graphic types differ in makeup (see the sidebar, "Featured Match-Up: Vectors vs. Pixels"), you can begin to understand how to use them and what their benefits are. High-resolution raster images can produce photorealistic paintings and actual photographs. Control over each and every pixel in the image gives the creative professional complete freedom to change even the smallest of details. However, pixel-based images have a finite level of detail, defined by the pixels per inch (ppi) or resolution of the file. Enlarging a raster-based file is akin to viewing a sheet of graph paper with a magnifying glassthe squares simply get bigger.

In contrast, vector graphics, which are defined by plotted anchor points, can be scaled to any size with no loss in detail or quality. As the image is resized, the computer does the math and plots the points at new coordinates and then redraws the Bézier path that connects them (Figure 2.2). Instead of storing millions of pixels in a file, a computer only needs to keep track of the coordinates of these anchor points and information on how to fill and stroke the paths that connect them. Vector graphics are also easier to edit because you have distinct shapes to work with, not miniscule pixels. Keep in mind, however, that this object-based approach translates to less control because you have no access to individual pixels.

Figure 2.2. The image on top is a raster file with a section shown enlarged to 200 percent. The result is the same image with larger pixels. The image on the bottom is a vector file with a section shown enlarged to 200 percent as well, but the quality of the image remains intact.

As you go through the remainder of this book, you'll get a better understanding of how vectors and pixels work and you'll see real-world examples of how they are used.

Featured Match-Up: Vectors vs. Pixels

You may not be a huge fan of mathematics but math has a lot to do with how computer graphics work. Raster images are made up of a matrix of dots called pixels. If you imagine a sheet of graph paper, each square represents a single pixel. By turning pixels on or off (filling in different squares), you can create a shape. Because the squares on the graph paper are so big, the results are block-like (Figure 2.3). However, if you had a sheet with much smaller squares, you'd have more control over the detail of your shape.

Figure 2.3. The level of detail in a pixel-based image is tied directly to the number of pixels it contains. Larger pixels result in less detail.

Pixel-based images are usually measured in pixels per inch (ppi). A higher ppi number means the size of the pixels are smaller and the level of detail in the image can be higher. Higher ppi comes at a price thoughfile size. As you increase the number of pixels in your image, your computer has to store that much more information in the file. Color adds to file size as well because instead of each pixel being either black or white, each pixel must store additional colors. Bit depth is the term used to describe how many colors a file can contain. An image with a high ppi setting (referred to as the resolution of a file) and a high bit depth can result in large file sizes. However, because of the tiny pixels and the capability to apply different colors to each of those pixels individually, raster-based images can produce images that are photographic in nature.

Let's go back to the sheet of graph paper. Instead of coloring in squares to create a shape, map coordinates on the grid to create boundaries for the shape. Then, just as you did when you were a youngster, connect the dots to create the shape (Figure 2.4). This is the vector-based method of creating graphics. Instead of a collection of pixels, vector shapes are actually objects, hence the term object-based graphics.

Figure 2.4. A vector-based image connects the dots to create a high level of detail without relying on pixels.

By truly understanding the benefits of these formatsand their limitationsyou'll be able to achieve any look or design in the most efficient manner. For more information on this hybrid of graphics files, see Chapter 8, Mixing It Up: Working with Vectors and Pixels.