Difference Between Vector and Raster Graphics

Example showing effect of raster graphics versus vector graphics.

In digital imaging, there are two categories of computer graphics: vector graphics and raster graphics. What is the difference between vector and raster graphics?

A vector graphic, such as an .AI or .EPS file from Adobe Illustrator or .SVG file from Inkscape, is a digital image which is composed of paths or lines with a starting and ending points, with angles, and curves. Using a series of mathematical formulas, this vector format constructs screen image that is scalable to any size without losing quality as well as maintain a small file size.

A raster graphic or bitmap image file format, such as a .JPEG, .PNG, .BMP, .TIFF, and .GIF, is composed of tiny squares called pixels with a dot matrix data structure that represents a grid of pixels of various colors, which together form an image (colorized pixels / points of color).

Unlike vector graphics which can be scaled to be very large without losing quality, raster graphics which are made of pixels become unsmooth and blocky since each pixel increases in size as the image expands to larger size.

Raster graphics are resolution dependent. A low-resolution raster graphic would blur or pixelate excessively if it were scaled up from business card size to billboard size, so that is why logos, repeat pattern designs, typographic images, and other designs for printing are typically created in vector format, because the quality will be consistent since it is made from a series of mathematical curves, that will print very crisply even when resized. In terms of image scaling, this is the difference between vector and raster graphics.

In terms of file size, raster image files can be quite large since the computer needs to remember information about every single pixel. Vector image files with minimal amount of information, on the other hand, comes with smaller file size. The other advantage of using vector graphics rather than raster graphics is that the load time of vector images is the same no matter the size.

Vector graphics that can create clean, scalable images in modern design are getting more and more popular these days, thanks to the need for responsive web designs, graphics for mobile applications and mobile games that adapt to varying screen sizes. Raster graphic is generally used for photographs and photo-realistic images, while vector graphics are ideal for printing and often serve better for typesetting or for graphic design. There are times when both vector and raster graphic formats come together.

Now that you know the difference between vector and raster graphics. Hopefully, understanding the differences between them will result in an efficient and effective process for your design needs.