Next Riot

Swift, Xcode, Cocoa & iOS thoughts, tips, tutorials & tricks by Kyle Gillen of Next Riot

Catch me on Twitter
Subscribe via RSS

Subscribe to my Swift Newsletter

Vector vs. Raster

Posted on

For anyone who’s not privy to the terms ‘raster’ or ‘vector’ – in the context of pixel-based imagery – the defining attribute boils down to the following: vector images can scale infinitely.

Vector

Regardless of whether you’re viewing a vector at 1x zoom or 10x zoom the shapes that make up that image are going to be smooth & crisp. This is due to vector images being nothing but numbers & math. Essentially, every time you zoom in or out on a vector it recalculates its size and position. As a result it can plot itself optimally over the space you’re viewing.

Raster

In contrast, raster images are ‘one & done’. Once you save an image in a raster format (png, jpg, gif) that image data is set, there’s no recalculating, there’s no zoom enhancement – nothing. The maximum size that the image was saved at is its optimal viewing size. If you decide to do a 10x zoom on it, you’re going to get artefacts (degradation, poor quality):

The effects of zooming a vector image versus a raster image.

So why don’t we all just use vectors?

With quality comes much CPU burden. Re-plotting and re-calculating a vector every time we move it a single point is a costly process (in terms of CPU overhead). Doing such calculations with icons, where the art tends to be fairly minimal (no gradients, no shadows, simple paths, strokes & fills) – the processing typically goes unnoticed. However, if we were to take a very intricate image like the Creation of Adam:

The Creation of Adam. Painted by Michelangelo at the Sistine Chapel.

The myriad calculations a processor would need to make in order to present it optimally at runtime would come with a large performance cost (it took Michelangelo 4 years, you can imagine it might take a processor a couple of extra milliseconds).

TL;DR

Until processors are ready to make short work of the Mona Lisa, use raster formats (png, jpg, gif) to save your own Sistine Chapel, and keep your vectors (eps, tiff, pdf, svg & computed output) to simpler art, such as sports emblems:

The Los Angeles Clippers revamped emblem for the 2015-2016 season.