Graphic Types: Vector Art

Graphic files come in many different types–and they’re not all created equal. Many printers or designers will request that you send logos or other images in “vector” format. What exactly does that mean?

Well, for starters, “vector” files should be one of the following types/extensions:

  • SVG — Scalable Vector Graphics XML format, allowing animations, etc. (. svg)
  • PDF — Adobe PDF format (.pdf)
  • EPS — Encapsulated PostScript (.eps)
  • DXF — AutoCAD drawing exchange format (.dxf)
  • WMF, EMF — Windows metafile and enhanced metafile formats.

The benefit of vector art is that it is resolution independent—meaning it can be scaled to any size, from a large billboard to a business card, with no loss of detail or sharpness. Its construction is mathematical, rather than pixel-by-pixel. Vector images can be generated by graphics programs like PhotoShop, Adobe Illustrator, CorelDraw, and Inkscape–or even GoogleDoc drawings.

This image is a small PNG, 150×125 pixels. Its file size is 13kb.
This is a tiny SVG file, only 75×75 pixels. Its file size is 3kb.

The opposite of a vector image is a “raster” image (GIF, JPG, PNG, TIFF, BMP etc.). All cameras, regardless of their resolution, generate raster images–as do some graphic editors, like Microsoft Paint. You can get high-resolution raster files, if your camera is good enough (or your “canvas” is large enough), but the file sizes will be anywhere from 10-100MB or more.

The challenge when using a raster or bitmap image file is that each time an image is manipulated, information is lost, changed and recalculated by the computer as it redraws the altered image. This can result in blurriness, jagged edges and loss of detail. If we tried to double the size of a raster image such as a JPG, the result would be blurry and low quality. But since a vector image is based on mathematical formulas, it can be doubled—or tripled—in size and still retain crisp, high-quality details. Vector images can also be edited to change color or shapes of a section without affecting the whole image.

This is the same SVG file, displayed more than five times the original size. Still sharp and clear!
This is the same PNG, displayed 3x larger. See how grainy and blurry it gets?
Welcome, visitor!