Vector vs Raster Graphics

Raster graphics are images that are defined in terms of a generally rectangular grid of pixels, or picture elements. Each pixel is one small square of colour, which, when combined with other pixels side by side, merge together to form one solid image to the eye.

Raster formats

There have been a number of formats developed over the years to store raster graphics. Some of the most popular formats are discussed below, each with their advantages and disadvantages.

BMP - Bitmap Graphics (Avoid wherever possible)
Easy to create with the built-in Windows Paint program.
Long history, therefore good, universal support.
No compression means the format is lossless.
Creates huge files since no file compression is used.
No transparency.

GIF - Graphics Interchange Format (Good for the web, on images of less than 256 colours, for example simple geometric shapes e.g. bullets for lists)
Creates small files as good compression is used.
Universally supported across platforms.
Transparency supported.
Animation supported.
Palette of colours limited to 256 per image.
Transparency is only 1-bit, therefore no translucency.

JPG - Joint Photographic Expert Group (Good for the web, for images like photographs where colour depth is important but lossless formats produce large file sizes)
Lossy compression format produces relatively small files.
Universally supported across platforms.
Artifacts visible at high compression rates.
No transparency.

PNG - Portable Network Graphics (Great for the web, but be careful if using transparency. Good trade-off of quality and compression)
Both lossy and lossless compression available.
Both 1-bit and full alpha channel transparency available.
Small file sizes produced.
Poor support in some web browsers for full channel transparency.
Compression not as great as lossy formats.

Vector Graphics

Where raster graphics are defined in terms of individual pixels, vector graphics are actually stored as mathematical rules - widths, heights, curves, proportions, ratios. Where raster graphics have a set height and width and look pixelated when stretched beyond these boundaries, vector graphics render themselves to the space given to them, such that they are resolution independent.

Vector based logos is not based on pixels any longer. It is based on points set at proportional distances, joined with lines and curves, and filled with a solid black colour. When drawing curves in vector graphics programs, a number of points are defined and dragged such that a smooth curve is plotted. This curve is independent of dimensions but is saved as in proportions and ratios such that it will scale to any resolution.

Vector artwork can be modified and stretched without havinng to worry about loss of quality, clarity or sharpness. Because of their mathematical origins, Vector Graphics are readily scalable without distortion.

Vector graphics formats Again, a number of formats exist for storing vector graphics, each with their advantages. It is important to note that, by their very definition, vector graphics are SMALL in comparison to raster graphics when it comes to file size. Since they are not saving information on each and every pixel, but rather rules for rendering, file size is cut immensely. The universally accepted format for vector graphics, particularly when it comes to company logos and sending files to print, is EPS - Encapsulated PostScript. PostScript is a format developed by Adobe to describe pages to a printer, plotter, or screen. Rather than storing straight data it stores instructions for the makeup of the page. Fonts are stored as individual character vector objects, for example, so they can be printed at as high a resolution as the printer can print. Macromedia's Flash technology is an excellent example of vector graphics working at their finest - whatever the window size, vector elements of the Flash movie appear crisply anti-aliased, and individual frames can even be printed in high resolution due to the vector-based nature.

Popular raster graphics programs
Adobe Photoshop
Jasc Paint Shop Pro
Macromedia Fireworks (tailored to web design)
The GIMP

Popular vector graphics programs
Adobe Illustrator
CorelDraw
Macromedia Freehand

Popular vector graphics animation programs
Macromedia Flash

A good question. At first glance, vector graphics seem to overcome all the difficulties of raster graphics. They can be resized to any size without loss of quality, and pixelation just doesn't occur. File size is also greatly reduced. However, each format has an individual purpose. A photograph cannot be expressed as a vector graphic because it simply isn't vector data. A sunset cannot be defined mathematically, at the risk of starting a philosophical argument on the world around us. The real world is not vector-based. The table in front of you has an infinite pixel depth, infinite variations in colours, infinite variations in relief and texture. Vector graphics are reserved for images such as typefaces, lines, curves. Complex vector images can be created but they have been created specifically IN vectors. Photographs and complex raster effects like lens flares are defined with pixel-by-pixel lighting and colour effects, not with vectors.

Logos for businesses should always be created as a vector. Why? For maximum usage. It's all very well creating a great raster logo with lens flares and bevels and gradients but what happens when it needs to be on a huge banner in a hall? Or, at the other extreme, printed on headed notepaper. Raster effects just are not practical when it comes to corporate identities. With vector-based logos, the image will scale to any size and any application; raster graphics would require re-rendering each time a new size was required, not to mention problems with transparency across print and computer platforms.