What Are Vector Graphics?

by Brightlemon Admin on 20 Jan, 2010
 
There are two main types of computer generated graphics; Bitmap or Vector.
 
Bitmap Images
 
A bitmap image uses a grid or ‘map’ of individually coloured square pixels (or ‘dots’) to present an image on computer monitor, TV screen or at high resolution as a printed image. Look at the 2 images below. They are both bitmap images, but the second shows what we see when we zoom right into the picture and we can actually see the individual coloured pixels that go to make up the image.
 
Vector Images
 
Vector graphics are created by plotting a series of points (called ‘anchors’), which are in turn joined together by fluid, straight or curved lines (called ‘paths’). When a path is ‘closed’, caused by the final anchor placed joining by a path to the first anchor place, a shape is created and the area inside the paths can be ‘filled’ with a colour, pattern or gradient. In the first image below, you can see a simple geometric shape which has been created with vector anchors, paths and a fill. Here is a more complicated shape (a representation of Africa in this case) showing the anchors and lines that have been used to create is:
 
So what’s so special about vector graphics? Well Bitmaps are all well and good when viewed or printed at their predefined size and/or resolution, but if we try and enlarge a Bitmap beyond it’s originally intentioned dimensions (ie take a bitmap company logo from a web page and then try to enlarge it to fill a piece of A4 printed paper say.) we will soon notice a massive degradation in image quality. (ie it looks rubbish!;)
 
What happens is that when the images is enlarged, each individual square pixel that goes to make up the images is also expanded and becomes more and more individually visible the bigger the image becomes. The end effect (often called the ‘Lego brick effect’) is that the images appears ill-defined and comprising of ‘blocky’ transitions in colours and has horrible jagged edges. So what happens if we want design something like a logo which is going to end printed on a massive promotional display at a conference centre (for instance) ? Well this is where vector graphics come in. We can expand a vector image as much as we like and we loose NO quality whatever!
 
How is this possible? Because a vector based image is not made of individual pixels but only of anchor points and the straight or curved lines that connect them. This means that when we expand the image all that happens is that the anchors simply get further apart and the lines ‘stretch’ to accommodate this. Below you can see a logo which is both bitmap and vector formats.
 
See what happens in the second image when we enlarge by about 200%? The bitmap is rough, jagged and suffering the ‘lego effect’ whist out vector graphic remains clean, crisp and ready to print! BITMAP AT 200% VECTOR AT 200% Other uses of vector graphics Another main use of vector graphics which, as web designers we should be aware is as elements of macromedia flash movies. (in fact if you create an image from scratch from within flash itself, it will be vector as default.)
 
If we use vectors instead of bitmaps in our flash movies, a user on any size or resolution screen can resize the movie to any size they like (we give them this option) and the images remain crisp and clean on their screen. More than this, if we use vectors we find the actual designing and editing of our flash movies a breeze, as we can resize and reshape elements over a timeline with no negative side effects .
 
We are also able to publish movies of much smaller file sizes because the information contained with in a vector is so minimal (how many anchors, where they are in relation to each other, what’s the shape of the path that connects them, is there any fill?) (A bitmap has to remember and render literally thousands of individual pixels, which create larger file sizes that vectors.)
 
So there you have it, Vector graphics, the print designer’s and flash editor’s friends!

BrightLemon