A basic vector shape.

The handles defining my shape.

Changing handles to alter the path.

Structure

The first step to understanding a vector image is to understand anchor points and paths, which by definition are the underlying structure of all vector images. Here we have a screenshot of a random shape drawn with vectors. The shape is composed of four anchor points which I have specified, and lines (or paths) that connect them.

Note: All of the screenshots here were taken from Illustrator CS3, which is Adobe's vector editing program. However, the fundamental structure of vector images remains the same through all vector editing programs. Consult your specific editor's manual for details.

The lines determine the outline of my shape. I don't directly draw the lines connecting the points, however. I determine how the lines look by giving my points 'handles', seen here. A handle is my way of telling Illustrator how I want the lines to look, but are not part of the printed image. There are only two ways to adjust a handle: change its length or change its angle. That's it.

To see how the handles affect the lines (paths), compare the images on the left. I have changed the length of one of the handles of the bottom-most point, but not its angle. The path from that point now juts further in the direction of the handle before it curves back to meet the next point.

For the left-most point, I have changed the angle of one handle, but not its length. This changes the direction of how the path leaves the point. (In math, these points represent tangents on the paths, but that's another article).

Think of handles in terms of a game of catch. The length of the handle is how hard I throw a ball before it comes down to earth. The longer the handle, the harder the throw. The angle of the handle equates to the direction I throw the ball.

My shape, no stroke, no fill.

My shape, no stroke, a red fill.

My shape, a four-point stroke, a red fill.

Color

Right now my shape has no color. If I were to print this image to my printer, it would print a blank page. The lines and points I see are Illustrator's way of showing me the underlying structure of my shape. To color the shape, I can outline it (a stroke) and I can fill it in (a fill).

At its most basic, a stroke has a single color and a uniform width. The width (or weight) of a stroke is often measured in 'points', not to be confused with the anchor points used to define our shape. Fonts are also measured in points. How big a 'point' is harkens back to the good old days of design, and is rather a complicated concept, so I won't detail it here. Just know that it is a unit of measurement, like inches or centimeters.

A simple fill is a single color filling in my shape. Fills can also be gradients of two or more colors, patterns, and more. The one attribute that defines a fill is that it fills my shape.

A shape can have a stroke and no fill, a fill and no stroke, a fill and a stroke, even multiples of each. The fill and the stroke are not dependent on each other.

Sample vector art, courtesy of Adobe.

Underlying structure of the art.

Putting It All Together

Complete vector images are made up of many shapes. They are stroked and filled in different colors and styles and layered one on top of the other to create complex images.

Powerful vector editing programs like Adobe Illustrator offer more options for how shapes look and interact with each other, giving a graphic artist lots of ways to create an image just how they want. They can change how see-through a shape is, how one shape is connected to another, and more. But the fundamentals remain the same.

Photorealistic vector motorcycle.
© techvector

The Pros and Cons

Choosing to create a picture as a raster image or a vector image requires knowledge of the advantages and disadvantages of each format.

The biggest bonus when using vector images is their ability to change dimensions without a loss of quality. I can create one image file and use it small on a postcard, then use the same image file for a billboard by increasing the dimensions of the art. Because the picture is based solely on the position of points and the handles of those points, changing the physical size of the image has no effect on how clean and crisp the image looks.

The vast majority of company logos are created as vector images, so that a company can use it on business cards, letterhead, signs, and more without concern for image quality (as is a consideration when using raster images).

The biggest disadvantage with vector images is the limit of photorealism that can be expressed with vectors, though the gap between vector images and raster images in this regard is certainly closing.

For example, higher-level functions in Illustrator such as the Gradient Mesh tool allow graphic artists to create extremely realistic art. The downside to photorealistic vector art? Most artists duplicate work from previous photographs, the art is time-consuming, and there can be issues when artwork is printed.

On that note, another consideration when working with vector graphics is the potential problems that pop up when printing the images. Printers only play well with raster images. Before a vector image can be printed, it must be turned into a raster image that the printer can work with. This process is called rasterization.

Rasterization can be done by the program (e.g., Illustrator), the printer itself, or dedicated third-party software. The quality of the conversion will depend on the power and sophistication of the software. Most rasterization software can handle basic vector images without a hitch, but some can produce unexpected results when hit with complex images.

In Closing

I've only just touched on vector images with this article to give non-designers a taste of the format. If you'd like to explore further, check out Lynda.com, which is a fabulous training site. They have excellent training videos, some for free and some through a subscription. Or, pick up one of the excellent Classroom in a Book books, which are written by the Adobe team, and a trial copy of Illustrator from Adobe.com to really get your feet wet.