Try a little experiment. Take a photo on your phone and zoom in, and in… eventually the smooth picture dissolves into a mosaic of coloured squares. Now open a company logo saved as an SVG and zoom into that just as far — the edges stay razor-sharp forever, no squares in sight. Same screen, same eyes, wildly different behaviour. That difference is the whole idea of this page: there are two fundamentally different ways to describe a picture to a computer, and they are called raster and vector graphics.

A raster image is a grid of coloured pixels — a photograph, a game sprite, the contents of the framebuffer at the end of the rendering pipeline. A vector image is a set of geometric shapes — points, lines and curves, each described by coordinates and equations. One stores what colour each cell is; the other stores what shapes to draw. Everything else — file size, scaling, jagged edges — follows from that single distinction.

Raster: a picture made of numbers

A raster image is a rectangle of W \times H pixels, and each pixel stores a colour as a few bytes — typically 3 bytes (red, green, blue), or 4 with transparency. So the raw pixel data is simply:

A modest 1920 \times 1080 RGB image is 1920 \times 1080 \times 3 = 6{,}220{,}800 bytes — about 6 MB, before any compression. Notice what the size depends on: the number of pixels. Double the width and height and you quadruple the storage, whatever the picture actually shows. A raster image has a fixed resolution baked in — a fixed number of pixels — and when you blow it up past that, the computer has no extra detail to invent, so it just makes each pixel bigger. That's the blockiness you saw.

Vector: a picture made of instructions

A vector image throws pixels away entirely. Instead it stores a recipe: “a circle of radius 20 centred at (50, 50), a line from here to there, a curve through these three points.” Nothing is decided about pixels until the moment of display, when the shapes are rasterized to whatever resolution you're viewing at.

This makes vector graphics resolution independent. The same short description draws crisply on a tiny watch face or a giant billboard, because the equations are re-evaluated at the target size every time. A logo, a font glyph, a map, a diagram — anything built from clean geometric shapes — is a natural fit. But a photograph of a forest is not: there is no tidy set of equations for a million leaves, so forcing it into vectors would need so many tiny shapes that it becomes larger and slower than just storing the pixels.

Where the two worlds meet: rasterizing a line

Every vector image ends up on a raster screen eventually, and that hand-off is where the trouble starts. A perfectly straight line (pure vector) has to be approximated by lighting up whole square pixels (raster). Drag the slider to change the line's slope and watch the pixel staircase chase the true geometric line — never quite matching it. Those stair-steps are aliasing, the “jaggies” you see on diagonal edges.

The vector description of that line is tiny and exact — two endpoints. The raster version is a specific set of filled pixels that only approximates it, and looks rougher the closer you zoom in. This is exactly why we invest so much effort in anti-aliasing: softening those steps by shading edge pixels partway.

Worked example: file size and scaling

Suppose a company logo is a simple flat shape. As a vector SVG it might be a few hundred bytes of coordinates — call it 0.5 KB — and it scales to any size with no loss. As a raster PNG at 512 \times 512 it is 512 \times 512 \times 4 = 1{,}048{,}576 bytes of raw pixels (1 MB before compression), and if a designer needs it at 2048 \times 2048 for a poster, that's a brand new, four-times-bigger file — and blowing up the small PNG instead would look blurry.

Now flip the scenario: a photograph of that same office. As a raster JPEG it compresses to a couple of megabytes and looks great. As a vector image it would be a nightmare — millions of coloured regions, far larger than the photo it's trying to replace. Neither format “wins”: you pick the one whose strengths match the picture. Smooth-toned, detailed, photographic → raster. Sharp, geometric, scalable → vector.