Vector Graphics

Introduction

There are two main methods of storing graphics:

• Bitmap
• Vector

The bitmap method stores images as a grid of pixels, each containing a binary number representing the colour of the pixel.

A vector graphic is stored as a list of objects and attributes. This acts as a list of instructions that tell the computer how to draw an image.

Objects are the names of the shapes that need to be drawn and attributes provide information about how each shape should be drawn.

Objects & Attributes

Computers use Floating Point Representation to store real numbers. This is similar to scientific notation.

Objects

At national 5, there are 4 objects that we may encounter.

Rectangle

This is simply a rectangle.

Ellipse

This is an oval or circular shape.

Polygon

This is any shape that has 3 or more sides.

Line

This is simply a line...

Attributes

There are also 3 attributes that we may encounter.

Coordinates (x-coordinates, y-coordinates)

This attribute indicates where the shape should be drawn.

Line Colour

This attribute indicates the colour the outline of the shape should be.

Fill Colour

This attribute indicates the colour the internal area of the shape should be.

Note: A line cannot be given the fill colour attribute as it does not have an internal area to fill.

Example

We could use the shapes and attributes above to create an image.

For example:

<rectangle x-coordinates="5" y-coordinates="5" fill-colour="blue" line-colour="black">

Advantages

Using vector graphics instead of bitmapped graphics may be beneficial in some situations.

As the image is made up of a list of instructions, the image can be easily resized without losing quality. If the image is resized, then the instructions change, and the image is redrawn. Compare the two examples below.

This is known as being resolution independent. Bitmapped images are resolution dependant.

Generally, file size is smaller than a bit mapped image unless the graphic contains a huge number of objects.

It is important to note that vector images can not store photorealistic images. A bitmapped image must be used for this.