Vector Artwork Is Awesome

You see that Daily SPUF logo up there? The one in the top corner of your current tab? The little black sticky bomb? The favicon? That there is a small PNG file. If I wanted to make that bigger, it would go all pixel-y and horrible. Of course, that little sticky bomb is a smaller version of the somewhat official Daily SPUF logo (which is honestly just the Lobster font and the sticky bomb from the Demoman’s class emblem) and I have a full-sized logo somewhere, but if I just made that favicon bigger, it would look bad.

Ah, I found the logo. Yes, it’s a simple logo. But it’s vaguely classy, and I don’t care if people are beginning to think that the Lobster font is the next Comic Sans, because that’s frankly not true. If anything, it’s the new Papyrus, but with a billion times more charm than Papyrus ever had.

Anyway, that logo above is another PNG image. Being black and transparent, it could theoretically be blown up quite large before the pixelation sets in. If I wanted to print off that logo, I wouldn’t use that version of the logo though. I’d use the original vector version that I made ages ago. Because that artwork can be scaled up to, well, huge sizes. And small sizes too.

With the copy of Illustrator I have, I can scale the vector version of that logo up to about 10m across.

Why is this? It’s because of what you’re saving. When you save a JPEG, the file is basically saving a ton of pixels that all need to be a single colour. If you have a photo that is 10 inches wide and tall, then there are 300 pixels per inch and each pixel contains nothing but the information on what colour that pixel should be. But if you make the picture larger, the photo has to add more pixels and those new pixels can only approximate what colour they should be based on the pixels around them.

Vector graphics don’t have this issue because you’re not saving pixels, you’re saving the positions of each of the little shapes that a vector graphic is made of. Using the below image of Arkay on a laptop as an example, I’m not saving each individual pixel, I’m saying that the white rectangle that makes the table leg goes here and the rectangles that make up the screen go there.

So why haven’t vector graphics taken over the entire universe? After all, they are much more scale-able than normal images, can’t turn into a mess of pixels and, depending on what they are, often smaller in file size too! In my opinion, it’s probably because most of the time it’s easier to just use an image. At least online. And you can’t just make anything into a vector, to the point that vector versions of things like photographs can easily end up becoming absolutely huge. Anyone who’s played around with the Live Trace tool in newer versions of Illustrator will know what I mean.

Vector artwork is a tool to be used for specific things. You can’t use vector artwork all the time. The same way you can’t use JPEGs for everything. Most of the time, it’s easier to just use a JPEG or PNG file make components on a website because you know they won’t be scaled up or down that much. But when you’re dealing with physical artwork, or anything that will be used at different sizes, vector graphics are the way to go.