Raster vs Vector Graphics

Not all pictures are saved where it has information on each individual pixel. Instead it saves mathematical equations or mathematical points. So let's take a look at the difference between raster graphics and vector graphics.

Raster versus vector

Here we have a picture of Mario, and we save information on each one of these pixels, on how much red, green and blue there is. This is what's called raster graphics, where raster graphics has these individual pixels.

Vector graphics actually has mathematical points. So in this example we have a circle, and there's just three pieces of information we really need to know about the circle. We need the center, where it begins, so that is an XY coordinate, so there is two numbers right there. Then we also need the circumference, so that's three numbers. So we could draw a circle with just three numbers here.

Now if we did want to add coloring, maybe we have a coloring for what the inside of the circle is, we would have to add the three bytes for that information. If we wanted a separate piece of information for the circumference color of the circle, what the outline is going to be, then we need to store that too. So we could possibly have to store a few other pieces of information, but for the most part we just need three pieces of information to draw this circle. That's significantly less than what we'd have to do with a raster picture.

Advantages of vector graphics

So what are some of the advantages here? Number one is just the file size is significantly reduced. We only have to have three points of data here just to get started.

It also scales really well. So now if we need to make the circle bigger, then all we have to do is change the C and we can create a perfect circle with that. That's not an example of a perfect circle, but the point being is that this is going to scale really well. Versus, we can't recreate when we have raster; when we scale it we can't recreate new pixels in there, so we're just stretching out the pixels we already have.

And then the other thing, changing color, can be really simple. Once again it's just the data point, so now we can just change the color and it will change all of this, versus raster, much more difficult if we want to change the color within a raster picture.

Examples

So let's see what this looks like. Here's an icon, it's just vector information with this, so it's got all of these outlines with it, and what I can do is size this. So I'm going to enlarge this, and we notice as we enlarge the edges of this still look really great. And I also can then just change the picture of whatever I want to change this to, so there's a lot of different colors that they can change this to. So that's an example of a vector graphic and the advantages of those vector graphics.

This is a picture of our tiny little Mario, and so if I scroll in we'll actually see the Mario character there. So now this is the raster, so if I were to enlarge this and make this larger, notice it just gets blurry, because what it's doing is trying to fill in the gaps and guess what it's supposed to be, but there's no new information with this, and so it just ends up being a blurry picture.

So when we end up taking photos or videos, those are all raster graphics, and they definitely serve a purpose. But when it comes to something like maybe a logo that we're creating, that's vector graphics. So there's certain times that we'll use raster and there are certain times we'll use those vector graphics.