Vector Graphics

One thing I run across when asking for a vector graphic is that a lot of the time my customers didn't know what it was. This was especially noticeable when I was working prepress. When we tried to explain it, we usually used the program it was created in as an example. The most common programs to create vector graphics are Adobe Illustrator and Corel Draw.

But after telling this to the customer, a lot of the time they would stick the original file they sent in an Illustrator file. This didn't actually help, as it still wasn't a vector file. So what is a vector graphic? To explain it, helps to know what a raster graphic is as well.

There are some terms I'm going to use, so keep an eye on them.

Vector

Raster

Pixelation

Pixel

Anchor Point

Raster.

Have you even zoomed in on a picture and saw it's pixelation? Pixelation gets its name from the word pixel. A pixel is what everything you see on a computer screen is made out of. You see a seamless picture, but it's actually several little squares put together. 

Pixelation is when you get up close to an image and it starts getting blurry. This type of graphic is called raster. It's the opposite of a vector file. Most people use this type of file for all of their art or photographs. It's most likely in the format of JPG, PNG, or GIF. There are others as well, but they aren't as common.

Vector

Vector images never get pixelated. Why? Because vector images don't have any pixels. These two images are the same exact thing, at the exact same zoom, but one is a vector file and one is a raster file.

A vector file is not a series of pixels, but commands, which the computer fills in to create the image. On the internet the format SVG has recently been getting more popular. It's the first vector format on the web. At its base form, it actually looks like a series of commands. 

Here is the same image as an SVG.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.93701in" height="3.23429in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"

viewBox="0 0 774 636"

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<style type="text/css">

<![CDATA[

.fil0 {fill:#0011B2}

]]>

</style>

</defs>

<g id="Layer_x0020_1">

<metadata id="CorelCorpID_0Corel-Layer"/>

<path class="fil0" d="M0 201l626 -67c11,-46 25,-91 41,-134l107 0 0 636 -158 0c-1,-9 -3,-18 -5,-28l-611 -57 0 -350z"/>

</g>

</svg>

Programs such as Corel Draw and Adobe Illustrator allow you to create images like this in a visual format, without having to know all this code. It starts with something called an anchor point. I've depicted it as a little black square. 

A line consists of two anchor points with a command for the computer that tells one anchor point to connect to the other anchor point.

A blue square is made up of four anchor points, with the command for point 1 to connect to point 2, point 2 to connect to point 3, point 3 to connect to point 4, close the shape, and color it blue. The only thing that's actually in the file are the 4 anchor points and commands telling them what to do.

So why use vector graphics? When you're printing something, you want the highest quality available, and vector graphics never pixelate, because there aren't any pixels! You can enlarge a vector graphic to 200 feet and it would still have edges that are crisp. The other reason that you want to use vector graphics is the ease of changing them. You can change the color by clicking a button. You can give it a fade, different outline, or whatever your heart desires. Why wouldn't you use vector graphics? Vector graphics are great for things like logos, text, and simple colored images.

Photographs, however are a different matter. If you made a photograph into a vector images, it would look horrible. I've taken an image of the 1960's era of Batman and converted it to vector. As you can see, the image looks cartoonish. The sheer number of colors in a photograph would make the image so huge that it would crash your computer, so stick with raster formats when you're using a photo.

(Original Photo from the Everett Collection)

A note. Putting a raster image inside of an Illustrator or Draw file will not make it into a vector file. Vector programs are capable of handling both vector and raster formats.