Vector vs. Raster

Vector vs. Raster Drawing

Computer graphics can usually be divided into two distinct categories: vector graphics and raster (or bitmap) images. Artboard is vector-based illustration software for Mac OSX. Find out what the differences are between vector graphics and raster images.

There are instances when working with vector tools and formats is the best practice, and instances when working with raster tools and formats is the best practice. There are times when both formats come together. Understanding the advantages and limitations of each technology and the relationship between them will help you choose the appropriate tools and plan your drawing strategies.

Understanding Vector Art and Raster Graphics

Example showing effect of vector graphics versus raster graphics. The original vector-based illustration is at the left. The upper-right image illustrates magnification of 7x as a vector image. The lower-right image illustrates the same magnification as a bitmap image. (source Wikipedia)

Raster images are based on pixels and thus lose clarity when scaled, while vector-based images can be scaled indefinitely without degrading quality.

Raster images are made up of a grid of dots, or pixels, with each pixel containing color information. Computer displays are made up from grids of small rectangular cells called pixels. The picture is built up from these cells. The smaller and closer the cells are together, the better the quality of the image. When magnified, the pixels are magnified and the image can become grainy, or pixelated.

Vector graphics use points, lines, curves, and shapes or polygon(s) that are mathematically defined to represent images in computer graphics. A vector graphics program uses these mathematical formulae to build the best quality image possible given the screen resolution. Vector graphics are scalable to any size and detail, and the file size of vector data generating the image stays the same. The quality of a vector graphic is limited only by the resolution of the output or display.

Drawing with Vector Art and Raster Software Tools

Due to differences in their formats, the approaches to drawing naturally differ among raster and vector programs. Depending on which you use, you should understand the approach and plan your illustration accordingly.

Raster images can originate from cameras and scanners, or can be drawn using various paint-type software. Because raster images are comprised of pixels, when a line is drawn (or painted) the pixels where the line is drawn are colored in. Editing pixel-based images typically involve selecting, recoloring, erasing, or otherwise altering the appearance of individual pixels. Many raster-based drawing programs support filling areas with color (for example, “bucket fill” tools) where pixels that are of the same color value or that are not yet assigned a color value can be re-colored. Thus, raster-based drawing software are often referred to as “paint” programs. Raster editing software such as Pixelmator are appropriate for these applications.

Vector graphics are always mathematically defined. Editing vector-based graphics typically involves drawing, moving, rotating, and otherwise manipulating the points, lines, polygons, and vertices. Unlike a raster image, each line and shape in a vector graphic is an individual object which can be represented with variously styled strokes and fills. Those objects are often layered (or stacked) on top of each other in the order in which they are drawn. Some vector-based software also provide layers for the user to organize their drawing objects. When working with vector-based design software, it is important to keep in mind that illustrations are “built” out of individual lines and shapes.

Building a vector graphic

Shapes are “stacked” together to build the vector drawing (shown separated for illustrative purposes).

Although the vector format offers many advantages, it is not always appropriate in graphics work. For example, cameras and scanners produce raster images that are impractical to convert into vectors. When working with raster images the editor will operate on the pixels rather than on drawing objects defined by mathematical formulae.

Printing and Exporting Vector and Raster Formats

It is common practice to export vector drawings to a raster format for their final purpose. On any given project, determining from the beginning what file format is required is a best practice – particularly if you have publication standards that must be met! In the most general terms, static web graphics require a 72 dpi (dots per inch) resolution and will typically use JPEG or PNG formats. Printing for publication typically requires 300 dpi resolution.

The file formats TIFF, JPEG, and PNG output raster-based graphics files. In general, JPEG and PNG files are useful for making a web images or graphics not intended for printing. For drawings that are primarily represented with vector graphics, PNG will typically give crisper results. ‘PNG’ stands for Portable Network Graphics format, a format for storing bitmapped (raster) images. Interlaced PNG files, though slightly larger file size than non-interlaced, can improve display times on slow (modem) Internet connections – perhaps less of an issue than in the old days. ‘JPEG’ stands for Joint Photographic Experts Group; it’s great for photographs but not really intended for representing vector graphics, thus is recommended when an image (such as a photograph) is the background of your drawing. ‘TIFF’ stands for Tagged Image File Format and is widely supported by image-manipulation applications, publishing, and page layout applications.

Vector file formats such as SVG and PDF preserve vectors. PDF was created by Adobe Systems and is the native file format for Adobe Illustrator™ – except with a different file extension (AI). Drawings saved as PDF can be opened and edited by Illustrator.

Finally, when creating graphics for the web, compress graphics files to keep websites optimized. We like the web service TinyPNG.com, and the native Mac app PNG Compressor, for quick and easy image compression.

5 replies
  1. Donal
    Donal says:

    Great set of tutorials for someone who has just purchased Artboard. Keep it up! Assume nothing! Some of us are complete newbies to the design and illustration worlds. Bezier curves are my current psychological cliff-face! I’m standing at the foot right now and taking a very deep breath.

    • mapdiva
      mapdiva says:

      Hi Donal, thanks for the kind words! Glad you are liking the tutorials – good luck with Bezier curves – they are really fun once you get the hang of it :)

  2. Vincent
    Vincent says:

    Good luck and continue like this :-) Don’t hesitate to announce next features in your app description on the app store ;-) good week.

  3. Vincent
    Vincent says:

    Thanks for the article :-) I thought you would speak a little bit about artboard, but not ^^ When the next and first update ? need text features :) (see french comments in appstore). Thanks !

    • mapdiva
      mapdiva says:

      thanks Vincent. Its a continuous cycle as we work on enhancements for the next (first) update. With development and testing (and the Apple review process), we don’t issue anticipated release dates. Rest assured, we are busy bees :) .

Comments are closed.