What is a Vector Graphic?

What is a Vector Graphic?

August 6, 2014

Vector versus Raster and why anyone asks for either.

Ack! Your sign company just called and said that they need a vector file of your logo to make a banner for that tradeshow.

“What’s a vector file?” you ask.

They respond with, “Oh, either an E-P-S or an A-I file.”

Okay, that’s great, now you know what to look for on your hard drive, but that doesn’t really tell you what a vector graphic is.

A quick Wikipedia search leads to:

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics. Vector graphics are based on vectors (also called paths or strokes), which lead through locations called control points or nodes. Each of these points has a definite position on the x and y axes of the work plane and determines the direction of the path; further, each path may be assigned a stroke color, shape, thickness, and fill. These properties don’t increase the size of vector graphics files in a substantial manner, as all information resides in the document’s structure, which describes solely how the vector should be drawn.

That isn’t really helpful either. So, let’s break it down. Essentially, you can have two types of graphics – a vector graphic and a raster graphic.

 

A Vector Graphic: Is made up of lines and blocks of color that form an image, illustration, logo, letter, etc._fourth]

A Raster Graphic: Is made up of a grid of pixels that form a photo or image. The photo you just took with your digital camera is a raster graphic.

So, what’s the difference? A raster graphic is defined by the number of pixels in the image. Your image will be x number of pixels wide by x number of pixels tall. It can never have more pixels than that (see Why Can’t I Use this Image from My Web Site in My Brochure?). You can take away pixels, but not add them. Making the image larger will only make the pixels larger, which will make the image look fuzzy or jagged.

On the other hand, with a vector graphic, the lines and blocks that create the image are defined by their start and end points, not by a number of pixels or dots, so they can be resized without any loss of quality. That vector file of your logo the sign company asked for can be sized to banner-size and still look nice and smooth when printed. A raster file will look jagged and/or fuzzy when printed larger.

Take a look at this example:

Vector versus Raster closeup

Another advantage is that vector graphics are probably going to have a transparent background, so that infamous “white box” won’t appear around the graphic. Yes, there are raster file types (.gif, .png, .psd) that allow for transparent backgrounds, but you have to start with a file that has a transparent background.

Vector graphics do have their disadvantages. You typically need specialized software to create them, and not all desktop programs play nice with them. A standard desktop printer may not like printing an .eps file, even though they’re perfect for sending to your printer for that brochure or to the sign company.

And even with incredible talent and the right software, vector graphics will still look like illustrations, not photographs.

Hopefully now you have a decent understanding of vector graphics and why anyone would ask for one.

Tip One

The most typical file format for vector graphics is .eps, although just because a file is an .eps file does not mean it is a vector file. Among other file types, you might also see a vector graphic as an .ai, .cdr, .svg, .dwg, .dxf. And there are multiple file types that signify a 3D vector graphic. Common raster filetypes include .jpg, .tif, .gif, .png, .bmp, .raw, and .psd. And there are a myriad of other specialized formats as well.

Tip Two

Make sure when you are working with a designer to create your new logo that they provide the final logo in a vector-based format, such as an .eps, along with some raster-based formats, including a CMYK .jpg, an RGB .jpg, and either a .png or .gif with a transparent background. They should also provide the logo in black, color, and a white version.