Raster Graphics and Vector Graphics

There are two basic kinds of graphics: raster graphics and vector graphics.

Most of us are familiar with raster graphics. They are images which are stored as pixels arranged in a grid. A perfect example of a raster graphic is a digital photograph. They include file types with the extensions .bmp, .png, .gif, .jpg, etc. One of the weaknesses inherent in raster graphics is that they lose resolution if you zoom in or blow up the picture. I think we've all seen pictures that looked pixellated—that's because they're raster graphics.

Vector graphics, on the other hand, aren't as well known. They are images which are stored as points, lines, curves, and shapes. An example of a vector graphic would be a TrueType font. No matter how big you make the font it looks smooth rather than pixellated.[1] Vector graphics include file types with the extensions .svg, .vml, .swf, .ttf, etc. One of the weaknesses inherent in vector graphics is that they require every detail to be drawn by hand. The result is that it's easier to draw cartoonish pictures rather than draw a highly detailed image.

To compare the two types of graphics formats, here is a zoom series of the blogger icon as a raster graphic:

And as a vector graphic:

See the difference?[2]

Now lets talk software.

There are many programs available for creating or editing raster graphics, including Microsoft Paint, Adobe Photoshop, Corel Photo-Paint, iPhoto, Open Draw, and Paint.NET. One of the programs that I use quite often is called GIMP (image above). It can be downloaded for free here. It is available for both PCs (Windows) and Macs (Unix). Basically it's a free alternative to Adobe Photoshop that can do almost all of the same things.

The number of available vector graphics programs is smaller. Some of the more familiar ones are Adobe Illustrator, Adobe Flash, and CorelDRAW. The program that I like to use is called Inkscape (image above). It can be downloaded for free here. It is available for both PCs (Windows) and Macs (Unix). Basically it's a free alternative to Adobe Photoshop that can do almost all of the same things.[3]

One final thought. Technically we're all raster graphics since if you zoom in far enough we're made up of atoms and at that level we lose resolution. But within the limits of the human eye we're all effectively vector graphics since no matter how close you get to someone they don't lose resolution.[4]

---

Notes:

[1] You could technically blow them up as big as a billboard and still have them look crisp and smooth.

[2] Blogger doesn't let me upload .svg files, so I actually had to fake the zoom series. But that's really how it would look.

[3] 3D graphics are also technically vector graphics. Though I've never personally used it, I'm told that Blender is the best free software for 3D drawing. It can be downloaded for free here. It is available for both PCs (Windows) and Macs (Unix).

[4] Unless you're farsighted, of course.

Image attributions:

Blogger icon is by ZyMOS, found at http://commons.wikimedia.org/wiki/File:Blogger.svg.

GIMP and Inkscape screenshots were created by me.