Vector Graphics

In bitmap graphics, images are stored as a grid of colour values. There is one number in the grid representing the colour of each pixel in the image at the corresponding position.

In bitmap graphics, if we wanted to draw a square, it would be done like this. The image on the left is represented as an array of colour values as on the right, where 1 means black and 0 means white.

Vector graphics work quite differently. In this approach a description of how to draw the image is stored instead. So the vector graphics equivalent might be:

rectangle {
    "left": 1
    "top": 1
    "width": 6
    "height": 6
    "line_width": 1
    "fill_colour": "white"
    "line_colour": "black"
}

This says, we want to draw a rectangle with:

• The left edge starting 1 pixel in
• The top edge 1 pixel down.
• The width of the rectangle is 6 pixels
• The height is 6 pixels.
• The thickness of the border of the rectangle is 1 pixel.
• The content of the rectangle is white.
• The rectangle outline is drawn in black

Each of these values is a property of the rectangle. This list of shapes to be drawn forming a whole image is known as the display list or drawing list.

Below is a real vector image of a square in a format called “SVG”. This stands for Scalable Vector Graphics which is a vector graphics description language supported by many web browsers.

If you save the above square image, you can actually open it in a text editor and see the instructions for the image. Inside you will find this:

<rect
    x="0"
    y="0"
    width="240"
    height="240"
    stroke-width="1"
    fill="rgb(255, 255, 255)"
    stroke="rgb(0, 0, 0)"
/>

This is a description, just like above, of what should be drawn on the screen.

• It starts with rect meaning draw a rectangle.
• We have X and Y meaning the left and top position.
• The width and height of the rectangle are specified (the rectangle is 240 pixels in size along each dimension)
• stroke-width means the line thickness of the rectangle outline which is set to one pixel.
• fill="rgb(255, 255, 255)" means the content of the rectangle should be set to white.
• stroke="rgb(0, 0, 0)" means the outline of the rectangle should be drawn in black.

Advantage of Vector Graphics

So what is the advantage of vector graphics? You might note the word Scalable in the name of the SVG format which gives a hint as to one of the key benefits.

The following image of bee is in a bitmap format.

If we make it larger it starts to go blocky:

However if you do the same with the bee as vector graphics, the image looks sharp when scaled up. In fact we can scale the bee to any size we like and it will still seem sharp. Zoom in on the vector graphics and bitmap versions of the bee and see the difference.

To double the height and width of a bitmap image, we double up each of the pixels. The problem with doing this is that approximations of shapes made with pixels get worse.

In the below example (left) we intended to draw a very small circle in a bitmap that is 4x4 pixels in size. We can’t precisely draw a circle at this size because we are limited to square pixels, so it comes out looking more like a plus.

If we scale up the circle (right), we simply double up the pixels, so now it’s 8x8, but it still looks like a plus and not a circle. The problem is the computer doesn’t actually know what shape it is supposed to be when it is scaled up. It just sees a bunch of pixels that looks like a plus so it makes a bigger plus when the image is scaled.

In vector graphics though, we know it’s supposed to be a circle because we have an instruction that says “draw a circle” in that location. All we have to do is double the radius of the circle specified in the vector description, redraw it and we get a bigger one.

As we increase the size, the quality will improve. It will gradually become less and less of an approximation and more like an actual circle.

Disadvantages of Vector Graphics

One key problem with vector graphics is you have to get the description of how the image is drawn from somewhere. You need the list of squares and circles and coordinates of them. A camera does not produce such a description. A camera produces a grid of numbers which is the colour value at each pixel on the camera sensor, in other words it makes a bitmap. So a camera is no use for making vector images.

The way vector images are produced is software watches an artist create the image and makes a note of what they do. It makes a note of when the artist draws a square, the exact point they started from and the exact point they ended. It then logs the coordinates in a file. Drawing out a vector image is in effect reproducing what an artist did, but just doing it very quickly.

The list of instructions in a vector image can get exceedingly long. This can make a complex vector image take longer to draw on the screen that the equivalent bitmap. A simple vector image with few instructions might have a smaller file size than the equivalent bitmap, but a complex vector image with many instructions could be much larger.

Another problem with vector images is the artist is restricted to the kinds of shapes that the vector software can reproduce. If the vector software has only rectangles, lines and arcs then that is all the artist is allowed to use. This limits what kind of art can be created. Vector art tends to be more commonly used for diagrams and cartoons that can be made from the available shapes.

Vector Displays

Almost all displays today use bitmap graphics to generate the image. When a vector image is drawn, it is first converted to a bitmap before it is displayed on a monitor. Displays previously existed though that directly drew vector graphics on the display and did not convert the image to a bitmap first.

The old style of monitor that preceded flat screens, Cathode Ray Tubes or CRTs, worked by directing a beam of electrons at a phosphorescent glass surface using magnets. Wherever the beam hits the phosphor, a dot appears. The beam was usually directed from left to right and from top to bottom for each line of the picture. However, the beam could actually be directed to any arbitrary point on the display at any time.

Wherever the beam moved it left a line trailing behind on the display. The beam could hence trace the outline of shapes. If the beam is moved in a square shape then a square appears on the display somewhat in the fashion of the classic Etch-A-Sketch toy. When controlled by a computer, the beam could be made to follow vector instructions and trace out collections of shapes.

Vector displays produced sharp, clear lines that were not possible with the low resolution bitmap displays of the time that could only display relatively blocky graphics. However, when the resolution of bitmap displays improved to the point that very fine lines could be drawn, vector displays no longer had an advantage and fell out of use.

The legacy of vector displays is seen in artistic choices made in movies. Where a graphic artist wants to imply that diagrams, and particularly wire frames, are computer generated, they sometimes draw them in a style where the points where lines cross are unusually bright. This is an artefact seen on vector displays. When the electron beam crossed over the same point more than once, that exact point would be brighter than the rest of the image due to being traced over multiple times. This does not happen on bitmap displays but the effect is sometimes used as a stylistic choice in film.

Image credit: Bee cartoon image. Vectrex Image.