Difference between raster and vector

In computer graphcs there are two main ways to represent an image – raster and vector. Which one we need depends on what we want to achieve.

All photos, for example, are raster. This means that they are made up of many pixels, containing information about color, usually in the three color channels – red, green and blue. In vector graphics, on the other hand, we don't have pixels, but points, curves and shapes.

Vector graphics' advantage is that they can be resized at no quality loss. If we zoom on a raster image, we'll see individual pixels and the viewing software may try to hide them by interpolating (blurring the pixels), but vectors remain sharp. But the more complicated a vector image is, the harder it becomes to visualize and manipulate. That's why they're suitable for documents, user interface elements and certain minimalist art.

Raster formats

PNG

PNG is a widely suported raster format and its two main characteristics are, that it has lossless compression, and that it supports transparency. It's very helpful for printing, where JPEG compression artefacts would ruin the print. Use it if you plan on editing the image later on so that you can preserve its quality.

JPG / JPEG

If you're using a camera, that's probably a format you've seen. Many cameras provide a RAW file, an unprocessed version of the photo, with a larger size, but more flexible for editing, but that's unrelated. JPEG uses a lossy compression algorithm, but it doesn't compress the image evenly. Compression is most prominent around the edges of areas with high contrast.

Vector formats

SVG

SVG is the standart vector format online. It's used and supported everywhere. An SVG file contains objects. These objects can be shapes, paths, text or raster. When editing an SVG in a vector program, shapes have properties like number of sides, which can be adjusted, before turning the shape into a path. Then it'll be made up of points and curves that can also be adjusted. Text objects, too, can be adjusted before turning them into a path. Raster images can also be imported.