Vector graphics

Previously on the CogitActive Saga:
Since it is essential the logo looks the same in all sizes, it is standard practice when designing a logo to use vector graphics.

If you look for the word vector in a dictionary¹, you will find different strands of meaning, each related to a specialized subject (from mathematics to genetics). The one that matters here is the one concerning computing:

Vector

Denoting a type of graphical representation using lines to construct the outlines of objects.

What does that means? A dictionary definition is not always satisfactory or accessible; ask my great-aunt Aunty (see What is a podcast?). So, what are vector graphics?

From a technical point of view

Vector graphics are made of paths, i.e. lines (both straight and curved) described in terms of their two end points. The positions of the points (in a given two- or three-dimensional space) as well as the shapes and sizes of the lines are defined using mathematical equations. In addition, each path is assigned various attributes, such as thickness and color.

These paths, also known as vector paths, can be used to represent any object that can be described mathematically (i.e. geometric primitives such as polygons and circles). The resulting graphics are basically a sequence of vector statements.

For my great-aunt Aunty

Vector images are drawn using instructions describing the image according to its geometric characteristics, not the actual visual elements. For example, to draw a circle, you need its radius and the position of its center (x, y) – and to know that it is a circle, of course.

In addition, you may choose to color it (i.e. fill). You can also decide which pencil to use (i.e. stroke style) for its contour. Actually, you can even use an invisible pen (or, more precisely, a pen infinitesimally thin) to draw the outline of the shape.

You are not limited to circles, though. You can make all the shapes you want; even though they are just points, lines and curves based on mathematical equations.

Still confused?

Perhaps, a better way to understand what vector graphics are would be to contrast them with something more familiar: photographs. Like the overwhelming majority of graphics seen on a digital display, photos are made entirely of individual colored boxes known as pixels. Since these graphics are defined in terms of rows and columns of individual pixels, each with its own color, they are called bitmap (or raster) images.

There are two main categories of graphics: Vector and Raster.

To understand the difference between both, you may want to consider watching this video from Sticker Mule:

Advantages

As illustrated by the above video, the most obvious advantage of vector graphics (over raster images) is their scalability. Since they are made up of precise mathematical points, they can be scaled to any size without loss in quality. There is not upper or lower² limit for sizing them. Likewise, they are resolution-independent, or more specifically they display at the resolution capability of the device used to render them.

Interestingly enough, you can also convert them into a raster image. However, this conversion is typically done at the very last step before display, ensuring that the final image matches exactly the resolution of the output device.

Another benefit of vector graphics is their small file size. A large dimension vector graphic require less memory space than raster graphics do.

---

To come back to the point (see How to create a logo?), a logo must be scalable without losing quality and needs to appear crisp whatever the final support. Hence, you should now understand why using raster images is not advisable for logos. One question remains, though. How to create vector graphics?

Coming next: a vector graphics software

---

¹ Oxford Dictionary of English – Third Edition. Oxford University Press. ^
² For a logo, it is however important to consider having variants, which include less detail, for very small size applications. ^