Raster vs Vector Graphics

Computer graphics that are interactive and mutable undergo mathematical transformations. Depending on user’s actions, the computer will take in that information and use different linear algebra principles to transform the image in the way the user intends. These transformations use matrix multiplication to change the graphic.

In order for computer programs or applications to manipulate images they read the image as a matrix, where each entry is a pixel value. Each pixel value is a combination of red, green, or blue (RGB) because computer screen use light, additive color. 

Additive color structure

Different programming languages have built-in libraries with functions that can be used to manipulate individual pixel values. At this point, manipulating graphics refers to filters (black and white, sepia tone, brightness, etc.) applied to images. The programs use nested for loops, or commands encapsulated within each other that run pieces of code for a given number of iterations, to comb through the elements of the two dimensional array. The types of images that would experience manipulations like photo filters are called raster graphics. These are collections of pixels on the screen and they do not have the same mathematical properties as vector graphics. Vector graphics can be scaled and not loose data or quality. This is because they are not just a matrix of pixels, they are defined by paths, curves, and end points. 

Raster graphics are often photos and
vector graphics are usually logos or models.

If a raster image image1 is defined as a matrix and it is being scaled to twice its size then the resulting matrix would have duplicate data  matrix . This redundancy of both rows and columns manifests itself as a pixelated image. When a high quality image is scaled down to a smaller size and saved or stored that way, the data of the image can be lost.

Example of loss of data causing pixelation.

This does not occur with vector images because they are not themselves matrices of image values. Vector shapes are matrices that are read and interpreted differently than rasterized images. 

Example of controls to make vector image.

One area of computer graphics that heavily uses vector shapes is in logos. Logos have to reshaped and resized for different platforms and merchandise. Because vector graphics are stored as paths and points they can be translated and scaled for different programs that read in vector graphics. For example, a pamphlet made in Adobe Illustrator can read in a vector graphic and scale it to a small size without it looking distorted. Additionally, a company that creates billboards can use that same vector graphic file and feature a logo that is completely not pixelated. Vector shapes are also greatly preferred because of the multiple platforms on which media is viewed. A logo can appear crisp on a TV screen and mobile phone.