Cartoon Logos 101: Vector Art vs. Pixels

 

vector-art-vs-pixels-coghill-cartooning-page-header

This article in my “Cartoon Logos 101” series will focus on explaining what exactly vector art is, how it compares to pixel-based artwork, why you should care if your cartoon logo is in vector art format, and the benefits as well as limitations of vector art.

You may also want to check out my podcast episode on vector art, or subscribe to my entire “Cartoon Logos 101 For Clients” podcast series (iTunes • RSS)


 

If you’re a regular reader of my cartooning blog, or if you’ve been over to my cartoon logo portfolio, you’ve seen the word “vector art” mentioned over and over. For those of us that create digital art, the term and the method of creating it is at least familiar to us. For the rest, it’s probably still a big mystery.

Pixels vs. Vectors

Let’s start off by comparing vector art to the other type of digital art — pixel-based art. Pixel-based digital images also go by the names “raster images” or “bitmap images”. With pixel-based art, the image is created with a bunch of small squares (these are the pixels). Each square (pixel) is a color. When you combine thousands and thousands of pixels of varying color at a small enough per-pixel size, the human eye will read them as an image. Any image you see on a website is (most likely) a pixel-based image. It’s actually made up of thousands (and probably millions) of pixels.

pixel-vs-vector-00

In the above image, I’ve enlarged a pixel-based image so the pixels are more apparent. Noticed the jagged edges. The jagged edges reveal the underlying pixel grid behind the image. You should be able to start visualizing all the tiny squares that comprise the image as a whole.

On the right is the same artwork in vector format. Note the zero degradation in image quality when enlarging the image. I could keep on enlarging the vector image and would never see any jagged edges (a.k.a. pixelation) or loss in image quality.

Pixel-based art is reliant on resolution. The simplest way to explain this is that the higher the resolution, the smaller the “squares” (pixels) packed into each square inch of the image. The smaller the pixel, the smoother everything looks.

Video games are a great visualization tool. If you are old enough to remember the Atari 2600, you’ll recall that it had a very low resolution, and the pixels were all very large. You could easily see the blocks used to make up the image. Compare that to today’s video games like the Playstation 3, where the higher resolution results in near-photographic imagery. Both are using pixels, but the Playstation 3 uses very tiny pixels. And lots of them.

If you’ve used or owned an iPhone or iPad with and without the Retina Display, you’ve seen the difference in clarity that a higher-resolution images (and computer display) can provide.

All digital photography is pixel-based, so it’s the same for your digital camera. The megapixel rating on a camera is based on the pixels and resolution.

Resolution is one of the limiting factors of pixel-based images. If you’ve ever tried to resize an image you pulled off the web to a larger size, you’ve noticed that it quickly becomes very low quality. This is because the number of pixels (the resolution) of those images is low.

How Does Vector Art Work?

So what does this all have to do with vector art?

Nothing, actually. Vector art doesn’t use pixels at all.

Vector art does something else instead: it uses math. Artwork created as vectors uses a “shape” method to create the images. Based off of basic shapes like curves, a circle/ellipse, a rectangle and then polygons and of course the simple line.

In the images below, I’ve highlighted the pixel grid in the bitmap image on the left, and the vector shapes (referred to as “paths” in the software jargon) on the right.

pixel-vs-vector-01

pixel-vs-vector-02

Let’s say you want to create a simple square. Vector art software uses math to determine key points that define the square. For a square, there are 4 key points (the four corners) and a line that connects those key points. And yes, the points are actually called points in vector art terminology.

By thinking of a square this way, the vector art software doesn’t need pixels (i.e. a bunch of little squares) “filling in” the area to create a square. It just needs to know “where are my key points?” and then it creates the square using that math.

The cool thing here is that because the software uses math to create the shape, it can create a larger shape just by multiplying the dimensions. In other words, if you create a square that is 10 inches by 10 inches, and you need a square that is instead 100 inches by 100 inches, the software just says “no problem, I’ll just multiply it by 10”.

So for a 10 inch vector square, you just need a simple (behind the scenes) math equation that says say “make a square”. And if you want it ten times larger, you just say “now multiply it by 10”.

Compare that to the pixel-based image, where a square of 10 inches is say 10 pixels by 10 pixels (which would be very low-resolution) would require 100 pixels, each in a specific position in the pixel grid (and each taking up space for the file size as well).

And then if you wanted to make a higher-resolution square (100 pixels by 100 pixels), each individual pixel (all 10,000 of them) in the square has to be recorded in the image. Every last one. The location in the grid and the color it has.

Therefore, pixel-based images need to be at specific sizes and resolutions depending on their use. And if you create the artwork at a low resolution, there’s really no way to enlarge the image later and not suffer loss in quality. Usually this loss in quality is quite severe.

Vector Art: Why Should I Care?

So why should you care if art was created as pixel-based art or as vector art?

The number one reason for the end-user of the art is this: there is no loss in quality, at any size. None. Zero.

Vector art doesn’t rely on this “grid”, nor is it limited by resolution. This means we can have one single vector art file that can be used at any size required.

You can take that image and scale it down to a business card, or up to a billboard and you can use the same file, and the artwork will look exactly them same in each case.

Remember earlier when I mentioned your attempt at scaling up that image from the web? It looks like garbage. There’s no way around this save for having a very high-resolution original. And the original needs to be created at the largest possible use size, otherwise scaling it up will make it look like garbage.

To be honest, for most clients the benefits can end right there. Especially for a logo. That should itself be compelling enough. You never have to worry about having a “high res” image for your logo since vector art is resolution-independent. You just never have to worry about it ever again. You just export your vector art logo at the desired size and resolution for web or print use, and it is the perfect size and quality.

Limitations of Vector Art

So vector sounds awesome. Why isn’t every digital image created using vector art? Well, it comes down to image type. Typically, images with lots of details, gradients, and color do not lend themselves well to vector art. Photographs fall into this category. Vector art is most ideal for images with a larger size and a lower number of areas of solid color. Logos, cartoon and stylized illustration artwork, and similar types of images fall under this heading.

It should be pointed out that there are some jaw-dropping photo-realistic illustrations created in vector art format, but these are handmade and extremely labor-intensive creations. At present, there is not method of capturing an image with a lens using vector art. Vector art software does have the ability to convert a digital photograph to a vector art version, but the results are usually not as photorealistic even if they can have a stylized realism aesthetic appeal of their own.

While vector art can indeed be used on web pages (when exported in the SVG file format), it is not common and many older browsers do not support this file format. To ensure compatibility with all visitors, web developers typically stick with the JPG and GIF image formats which are widely used and supported by all browsers.

Vector Art: Wrapping Up

Hopefully that clears up the differences between vector art and bitmap/raster/pixel-based art, as well as why you’d want your cartoon logo in vector art format, and created that way by hand, from the start. You’ll never have a print service ask you for your logo in higher resolution ever again!