Vector Graphics

Unlike raster images (photos, covered in Unit One) vector graphics do not consist of pixels arranged on a grid with different values. Instead vector graphics are stored as sets of instructions that a computer can run to re-create a graphic.

A simplistic example of these instructions could be:

  1. Create a circle with a center 3 units above the center of the image, and a radius of 2 units.

  2. Fill circle with yellow

  3. Create a line from 2 units below the center of the image to 3 units above and two units left of the center of the image.

  4. Create a line from 2 units below the center of the image to 3 units above and two units right of the center of the image.

If there were a program that could run this very simple script, it might draw to the screen the following:

SimpleScriptOutput.png

The good thing about this is that you'll most likely never have to actually look at the script the computer creates, just like you never have to look at the array of pixels and channels that are stored in a photograph. However, if you want to get advanced, that would be possible (and quite a bit easier than editing a raster image). Instead, we will be using tools that convert the things we draw with the mouse and keyboard into one of these scripts that the computer can follow when it wants to re-produce an image to view on the screen (the screen is really just a raster graphic viewer). Then when we are all done, we can have it run the script again to produce another raster graphic that can be saved into a PNG file.

It is also possible for this script to include a certain amount of time to wait before something happens. This allows for animations; some simple examples would be having a stick figure move across the image or having a ball bounce.

One of the very important benefits of vector images is that all the commands for the image are relative.  If you need to increase the size of the image, you just need to change the units that all the commands are applied to.  In the above example, one unit equals approximately 10 pixels, but this could easily be modified so that one unit equals 20 pixels or even 100 pixels.  The image would automatically scale up to the new size without losing any quality, the image will stay crisp and you won't see any pixel artifacts.  This is the opposite of how photos work, there if you were to try to scale the photo up to double or ten times the original size, you would see problems show up in the image. 

Here is an example using our simple image.  In each case, the vector graphic is on the left and the raster graphic is on the right.

One unit equals 10 pixels.
SimpleScriptOutput.pngSimpleScriptOutput.png
One unit equals 20 pixels.
SimpleScriptOutput-Vector2.pngSimpleScriptOutput-RasterScale2.png
One unit equals 100 pixels.   (This one is being scaled back down  to one unit equals 40 pixels by the web-browser to fit to the screen, if you want to see it as full-sized right click on it and view it separately.)

SimpleScriptOutput-Vector10.pngSimpleScriptOutput-RasterScale10.png
You can see that as we talked about in the photos section, the raster graphic doesn't scale up to the large size very well.   However, the vector graphic continues to look smooth and clean at any size. 

In addition to cleanly scaling, vector graphics usually take up less space.  In a raster image, data needs to be stored for every pixel (in three or four channels).  If you have large images, this can be millions of bytes.  Vector graphics on the other hand only store the information necessary to make the shapes and color them in.  For the above example, this is just four commands, each one taking only a few bytes.  There are things you can do to make very complicated vector graphics, but typically they will be much smaller than their raster counterparts.

The other very nice thing about vector graphics is that when you are using graphical programs like Inkscape or Illustrator to edit them, it is very easy to select objects.  For photos we had some real challenges in selecting different objects (like the airplane and the statue's arm).  However, since in vector graphics the commands to create each object are stored, when you click on an object, it is easy for the program to guess which object you are trying to select.  You can then easily modify that object by resizing it, rotating it, or moving it.

File Formats

The primary file format currently in use is SVG or Scalable Vector Graphics (see: http://en.wikipedia.org/wiki/Svg ) which is a type of human readable file called XML (eXtensible Markup Language see: http://en.wikipedia.org/wiki/XML). Although XML and SVG are human-readable, we will not be reading them directly as part of this material. SVG is supported in most vector drawing programs, however it is not yet supported by all web browsers (though this is rapidly changing). If you simply want to use your images on web pages, it is best to convert them to Portable Network Graphics (PNG) which is a lossless raster format.

The other major format for Vector Graphics is the EPS or Encapsulated Post Script. Post Script itself is a file type used for printing (especially industrial printing), and EPS images are built to be easily put inside of a Post Script document. This format has been around a lot longer than SVG, and is supported by many more tools (especially the old ones). Likewise, it is not recommended for use with web browsers.