Raster vs. Vector Graphics
Chances are, if you've ever worked with a designer, at some point they've asked you for a "vector version" of your logo. The conversation generally goes something like this:
Client: Hey Designer - Attached you'll find a copy of our company logo. Looking forward to seeing those proofs!
Designer: Thanks Client, but the image you provided is a low resolution copy of your logo. This image will not reproduce well on the brochure you'd like printed. Can you please forward me a vector version of your artwork?
Client: Sure... Let me see what I can find.
Days later...
Client: What's a vector?
This post is designed to answer that question.
There are two kinds graphics:
- Raster - A collection of dots or pixels
- Vector - A collection of paths
Raster graphics use a grid of individually colored pixels to represent an image, whereas vector graphics use a mathematical equation between paths to represent an image. Vector graphics, because of their mathematical composition, can scale up without distortion. In contrast, the larger you scale a raster graphic, the more pixelated the image appears. This concept is illustrated in the example below.
When we magnify the sushi graphic above to 1000% it's easier to see the distortion/pixelation that occurs in a raster image.
Raster Images |
Vector Images |
|
| Composition | Collection of individually colored dots or pixels | Collection of paths that form a shape |
| Resolution |
Concentration of visual information within a given area |
Defined by a mathematical equation, not by dots or pixels Completely scalable |
| Common Uses |
Photographs and images with highlights and shading |
Graphics of uniform color, layouts, type/text, and illustrations |
| File Size | Larger - Keeps track of individual pixel info | Smaller - Keeps track of mathematical equation |
| File Types |
.BMP - Windows Bitmap |
.EPS - Encapsulated PostScript .WMF - Windows Metafile .AI - Adobe Illustrator .CDR - CorelDraw .DXF - AutoCAD .SVG - Scalable Vector Graphics |
