A simple explanation of Vector Graphics & illustrations

Understanding the difference between vector and raster graphics is one the basic fundamentals of graphic design. A vector image is based on mathematical formulas instead of raw pixel data as is the case with a raster image.

A camera generated image (raster image) has a native resolution and it gets pixelated if scaled beyond that resolution.

A raster image has a fixed resolution and if you scale it beyond its native resolution then you would get a pixelated image. A vector image on the other hand can be scaled to any resolution without any loss in quality or pixelation. 

The vector image looks crisp with smooth edges even at higher resolution and maintains the quality on scaling.

Let’s explain the difference using a small example without using any technical jargon. Let’s say you have a right angled triangle drawn on a sheet of paper and you want to make a copy of that triangle. One way of doing it would be to take a photocopy of the entire sheet. 

The other method would be to measure the dimensions of the triangle and create an exact copy on another sheet of paper. You can measure the lengths of all the sides and all the angles any two sides make. 

In this case we only need three values to replicate the triangle. The length of the side AB, length of the side BC, and the angle it makes at vertex B which is 90°. You just need these three values of data and you can create an exact copy of that triangle on another sheet of paper with exact same dimensions. 

You don’t need to measure the distance between A and C as it can be easily calculated using the Pythagorean theorem or by using the Law of Cosines Formula. This is the concept which vector graphic software like Illustrator and CorelDraw use to create vector illustration. 

As it’s obvious, the example given above was an oversimplified explanation whereas the actual software uses complex mathematical formulas and algorithms to establish points on a grid when you draw something.

Why do we use vector images?

A raster photograph generated by a camera contains a lot more information than a vector illustration and looks a lot more realistic. The limitation of resolution in camera generated raster images was a problem with early digital cameras but modern cameras with improved optics and sensors can take pictures in ultra high resolution.  

So why do we use Vector images when we can use a photograph taken by a camera. This would also save our time as we won’t have to invest hours in creating a vector illustration.

Digital artists and graphic designers consider Vector illustration as an art form. Vector graphic software provides you with a digital canvas and color palette to unleash your creativity. 

Once you master the basics you can really create some great looking vector illustration. If you are an aspiring digital artist you can take inspiration from websites like Behance and Dribbble.

Behance contains a lot of work of professional digital artists like Cristiano Siqueira and Orlando Arocena

So, the main difference between a Vector illustration and a raster image comes down to utility. There are use cases where we can’t use raster images. For example, computers use fonts to display text which can be scaled without getting pixelated. So, in a way, font files are a type of vector illustration. 

Vector illustrations are especially useful for creating animation, digital games, and for designing scalable illustrations like logos.

How are vector illustrations created?

Vector illustration, unlike raster images can only be created using a digital graphic and modelling software like Illustrator and CorelDraw. If you don’t have access to a proprietary software like these then you can use free alternatives like GIMP and Inkscape.

A vector illustration has its own file type. The most common ones are:

. ai  – short for Adobe Illustrator is commonly used for creating digital graphics for print media. 

.eps – short for Encapsulated PostScript is an older type of vector graphics file. .eps files don’t support transparency in the way more modern file formats like .ai do.

.svg – The Scalable Vector Graphics format is based in XML. This is kind of a standalone file and is independent of any proprietary software. It can be read and displayed by most of the modern browsers. 

A vector illustration can be animated using animation software like After Effects, as it’s a lot easier to manipulate a digital image based on vectors.

So, understanding the basics of vector graphics is the first step towards mastering digital graphics. You should know what a vector graphic is before you start creating them.