Advice
By Media
By Stage

Introduction to the Vector Image Format

Comments (0)

Digital image formats fall into two main categories: raster and vector. The raster format lends itself to continuous tone images such as photographs. This document introduces the vector image format which is more suited to the defined lines, curves and shapes of charts, logos, web graphics, technical drawings, cartoons and fonts.

Introduction
Common uses for vector images
The code behind the image
File sizes
Editable individual attributes
Rasterising and vectorising
Animation - making your vectors move
Further resources

Introduction

Detailed information on the raster format is available elsewhere on the JISC Digital Media site: a good place to start is File Formats and Compression.

Vector images are made up of many individual elements or 'vector objects'. These objects can be lines, curves, circles, rectangles or any other shape connected by paths and points. Because each object is defined not by pixels but by mathematical instructions, it is fully scalable and you can transform, resize or reshape it without losing quality. See our Vector Graphics Illustrated Glossary for a list of common terms used in vector graphics.

Drawing programs interpret these instructions to create and display vector images. Put very simply, a vector image is described in mathematical terms such as "plot a line from A to B" or "draw a circle with a diameter of X". The actual maths is a bit more complicated than this, but it is useful to think of vectors in terms of instructions, coordinates and units of measurement, in comparison to the raster method of describing the location and colour of every single pixel.

Common uses for vector images

Vector images are commonplace. From technical drawings and creative illustrations to animated and interactive web graphics, they are very much the format of choice in modern design. In certain specialist areas, computer-aided design for example, the vector format is the only choice.

There are many less specialised everyday uses of the vector format, where users may not even be aware they are creating vector images:

Drawing tools to make lines, arrows and shapes in common office software such as Microsoft Word, Excel and PowerPoint; Apple Pages, Numbers and Keynote; or OpenOffice
Fonts - most computer fonts are vector fonts, where each character is scalable
Charts and graphs created in common office software

Using dedicated drawing and illustration software (e.g. Adobe Illustrator, Adobe Flash, CorelDRAW, Xara Xtreme, ACD Canvas, Inkscape - see Vector Drawing Software for more) you can create anything from simple shapes and diagrams to complex illustrations or animations. Each program features its own variety of tools but they usually all include pen/pencil/brush options and automated line and shape tools. Additionally, many programs allow you to import your own scanned drawings (or photos) into the program and 'trace' them to create a vector format image.

Once you have 'drawn' your first vector object, you can alter each separate element independently (e.g. size, shape, colour, line thickness).

The code behind the image

Most vector drawing programs use their own proprietary file formats, and it is not possible to examine the code behind the resulting images. However, the underlying source code behind the open standard Scalable Vector Graphics (SVG) format is text-based and 'human readable', and so gives us a useful means of seeing both how simple and how complex the maths can be.

For example, in SVG an orange rectangle with a blue outline can be encoded like this:

<rect width="120" height="80" fill="rgb(255,51,0)"
stroke="rgb(0,0,204)" stroke-width="4" />

Using fairly straightforward 'human readable' terms, this instructs the program displaying the image to draw a rectangle with a width of 120 pixels and a height of 80 pixels. It is filled with a shade of orange (as defined by the RGB colour value of Red 255, Green 51, Blue 0), and is outlined with a blue stroke (R 0, G 0, B 204) that is 4 pixels wide... and it looks like this:

Orange rectangle with blue border
Figure 1. Simple vector image (saved as a GIF here for display on the web)

If a vector image is resized, there will be no loss of quality. This is because when resizing a vector what happens behind the scenes is a change to the mathematical instructions. So if we resize our 120 by 80 pixel original by ten times to 1200 by 800, the sharpness of the original is retained because it is the maths in the code that has been adjusted rather than the physical image itself:

A section of the resized orange rectangle
Figure 2. A section of the resized vector - the clarity and sharpness of the original is retained

Because of the mathematical nature of the vector format, the only changes that take place during resizing are to certain parts of the code. In our simple SVG example the code would now read:

<rect width="1200" height="800" fill="rgb(255,51,0)"
stroke="rgb(0,0,204)" stroke-width="40" />

If a raster version of the same image were rescaled by the same amount the results would be quite different, as the following images demonstrate:

(a)

(b)

(c)
Figure 3. Scalability of vector images

The images above illustrate the scaling potential of vectors. Image (a) at the top shows the JISC Digital Media logo, a small vector file that has been converted into a raster for web display (see Rasterising and vectorising below).

Image (b), which shows the top of the 'S' in 'JISC', is the result of scaling up the raster by 20 times (interpolated in Photoshop). Note how fuzzy the image has become.

Compare this with the crispness of Image (c), which is the original vector file scaled up by 20 times before being converted into a raster. A vector image is 'resolution independent' and can be enlarged to any size and still retain its clarity.

The image of flowers below is as much a vector as the simple orange rectangle (Figure 1 above) and the logo (Figure 3 above): it is composed entirely of mathematical instructions... just a lot more of them. The more complex the image, the more complex the code behind it.

Vector image of two flowers
Figure 4. Complex vector image (Converted into a raster format for display on the web)

By zooming in on a portion of this image, it is possible to distinguish the individual paths:

Vector image of two flowers, a portion is enclosed by a rectangle box Zoomed portion of vector image of two flowers
Figure 5. Zooming in on individual paths

The SVG code for the path selected in blue above is:

<path style="fill:#a8b915" d="M82 66 c6.441 -0.04419
3.924 4.311 10 6 c0.951 0.1798 1.82 1.049 2 2
c-0.4824 1.284 -1.716 2.518 -3 3 l-6 -5 l0 -1 c0.629
-2.333 -4.038 -5.134 -5 -3 c-3.869 0.3558 0.1422
-3.184 2 -2 z"/>

Most of the numbers here refer to coordinate points marking out the position and shape of the path. Each path in the image - there are 421 paths altogether - is defined by its own line of code describing its colour, shape and position.

To display the full code for the entire image would require the equivalent of over 20 pages of A4 (if you really want to, you can view the full source code).

As we saw with the orange rectangle, any change to the image is actually a change to the code. In the flower example, if a point along a path is moved, the change will be reflected in the coordinates in the code. If the entire image is resized then every line of the code will be updated.

File sizes

As well as making vectors scalable, their mathematical nature also means their file size is much smaller than a raster equivalent. You can scale a vector image to any dimension with no major impact on its file size. Creating raster versions of the same image at different dimensions can have a considerable effect on file size, as Figure 6 below illustrates.

Figure 6. The effect scaling has on file sizes of raster images

Editable individual attributes

One of the most useful features of the vector fromat is that you can transform each vector object independently within your image. This means you can easily edit attributes such as colour, fill and outline (or stroke) on an individual basis. You can make changes and transformations at any time while the image is in a vector format - it only becomes locked for editing once you have converted it into a raster format (see Rasterising and vectorising below). This means you can go back to a vector image in much the same way as you might edit a word-processed document (which allows you to limitlessly change fonts, colours, formatting, etc.) This makes vector images extremely versatile - one image can act as a template for endless permutations.

Table 1: Raster and vector images compared
Raster formats (bitmaps)	Vector formats (object-oriented)
Used for representation of continuous tones - suited to photographs and photo-realistic imagery	Used for drawings and diagrams that can be described by mathematically defined shapes and attributes
Grid/matrix structure	Mathematical or textual description
Resolution dependent: scaling-up will diminish quality	Resolution independent: scaling-up is easy with no loss in quality
Most common format when digitising analogue images	Not normally used for digitising, apart from some specialised mapping applications
Most common web format	Less common web format
Layering of images less common	Layering of images easy and common
Usually larger in file size	Usually smaller in file size
Usually quicker to display	Usually slower to display
Difficult to convert to a vector format	Easily and often converted to a raster format

Rasterising and vectorising

It is very common to convert vector images into a raster format (rasterise) for display on the web, since browsers do not yet fully support most vector formats... with the notable exception of the Flash format which is used to deliver animated graphics and video on the web and is supported by most modern browsers through a free plug-in. The open SVG format is also supported in some browsers, but take-up has yet to match Flash's ubiquity (see the next section Making your vectors move).

Rasterising a vector image is usually a simple case of saving or exporting it as a raster file format, and most drawing programs offer a number of formats to choose from. Remember that once a vector image has been rasterised, you will generally need to return to the original vector version to edit or rescale it: once it is in a raster format, all the individual editable attributes will have been transformed into a grid of fixed pixels just like any other raster image. See also our Vector Graphics Illustrated Glossary entry for 'rasterise'.

It is also possible to convert raster images into vector formats (vectorise), but the process is not quite as straightforward as rasterising. There are a number of dedicated raster-to-vector conversion programs available (see our Vector Drawing Software for further information), but most of the major drawing applications feature a tool for 'tracing' raster images.

Tracing an image turns it into a series of vector objects - paths, shapes, fills and points that correspond to the colours and lines of original bitmap image. How precisely and faithfully they match depends on the sophistication of the software, but can also usually be determined and tailored by the user. The flower image in Figure 4 above was originally a raster image (a scanned photograph) that was then converted into a vector format.

Animation - making your vectors move

This section looks briefly at animated vector graphics. If you'd like to know more about film and video take a look at our Moving images advice which also include some advice on animation using raster formats (e.g. animated GIFs).

The vector format lends itself well to animation and gives scope for a wide range of uses - from simple animations showing points on a graph to more complex interactive charts, vector animation is often more suitable for web display than raster animation or video: files sizes are relatively small and scalability makes them ideal ideal for viewing at different screen sizes without loss of detail.

Most of the animated vector graphics you come across on the web will have been produced using Adobe Flash. SVG is also capable of animation, but as mentioned previously, despite some browser support it is still not widely used for still vector graphics on the web, let alone animation. For more information on SVG, please see the following JISC Digital Media advice documents:

Vector Graphics Illustrated Glossary for our entry on 'SVG'
Vector Graphics Resources for links to other useful SVG resources and examples of SVG in use.
Vector Drawing Software for details of SVG authoring programs.

While SVG has yet to take off, Adobe Flash remains the 'industry standard' software for producing and displaying animation on the web. Flash can be used for everything from simple 2D animations to interactive 'rich content' web sites, video, and mobile device content. An example of a simple 'interactive' Flash animation can be seen in our Using Images in Education advice document. Although you will find them primarily on the web, you can also play Flash animations in presentation software such as Microsoft PowerPoint or Apple Keynote. Keynote can also export presentations as Flash files.

If you are interested in creating animated graphics, Flash may seem the obvious choice - in the right hands the end results can be very impressive, especially as they can incorporate a combination of animation, audio, video, text, raster images and interactivity. However, the learning curve to produce an all-singing, all-dancing interactive Flash animation is steep and not for the faint-hearted. That's not to say you can't use Flash to create basic animations too, but you should be aware that a decent investment of time will be required.

If you are already producing vector graphics in Adobe Illustrator, you'll find the two applications integrate well with each other - you can import AI files and choose to convert any layers into Flash layers or keyframes; similarly you can export vector images from Flash for editing in Illustrator.

Although Flash is widely used and has near-universal browser support - it requires the Flash Player browser plug-in which most modern browsers have pre-installed - you should not assume that all users will have up-to-date players, and many users will not have the administrative rights to install or update such plug-ins on their work computers. This can be an issue if content produced in later versions of Flash uses new features that are not recognised by older versions of the Flash Player, and if this happens you may find some of your users are unable to view your content at all.

It's also important to make sure your Flash content is accessible to learners with disabilities or available in another format. JISC TechDis have some useful advice on Adapting multimedia-based materials and more specifically a Flash Advice and Guidance Sheet (MS Word doc) which looks at the accessibility features in Flash.

Further resources

Take a look at our Vector Graphics Resources page which provides links to further information on the vector format. Our Vector Graphics Illustrated Glossary defines some commonly-used terms and our Vector Drawing Software looks at the main applications as well as some more specialist programs, highlighting the main points to consider when choosing software.

Ask us a question

We provide a FREE enquiry service giving advice to the UK Further and Higher Education community.

You can ask us anything, typical questions include - "What formats should I use?" "How do I...?" "What tools can achieve the result I need?" "What is new and emerging?"

By Media

By Stage