GeeksforGeeks App
Open App
Browser
Continue

# Vector vs Raster Graphics

Before we begin with what vector graphics and raster graphics are, we must understand a few basic terms:

Pixel: In Computer graphics, a pixel, dot, or picture element is a physical point in a picture. A pixel is simply the smallest addressable element of a picture represented on a screen. A majority of pictures that we see on our computer screen are raster images. The selfie that you click with your mobile phone is another example of a raster image. An image is made up using a collection of pixels referred to as a bitmap.

Bitmap: In computer graphics, a bitmap is a mapping from some domain (for example, a range of integers) to bits, that is, values which are zero or one. It is also called a bit array or bitmap index. The more general term pixmap refers to a map of pixels, where each one may store more than two colors, thus using more than one bit per pixel. Often bitmap is used for this as well. In some contexts, the term bitmap implies one bit per pixel, while pixmap is used for images with multiple bits per pixel.

Raster Graphics

Raster images use bit maps to store information. This means a large file needs a large bitmap. The larger the image, the more disk space the image file will take up. As an example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image (from a 6.3 Megapixel digital camera) needs to store information for a whopping 6,291,456 pixels. We use algorithms that compress images to help reduce these file sizes. Image formats like jpeg and gif are common compressed image formats. Scaling down these images is easy but enlarging a bitmap makes it pixelated or simply blurred. Hence for images that need to scale to different sizes, we use vector graphics.

File extensions: .BMP, .TIF, .GIF, .JPG

Vector Graphics

Making use of sequential commands or mathematical statements or programs which place lines or shapes in a 2-D or 3-D environment is referred to as Vector Graphics. Vector graphics are best for printing since it is composed of a series of mathematical curves. As a result vector graphics print crisply even when they are enlarged. In physics: A vector is something that has a magnitude and direction. In vector graphics, the file is created and saved as a sequence of vector statements. Rather than having a bit in the file for each bit of line drawing, we use commands which describe a series of points to be connected. As a result, a much smaller file is obtained.

File extensions: SVG, EPS, PDF, AI, DXF

Conversions:

1. Vector to Raster: Printers and display devices are raster devices. As a result, we need to convert vector images to raster format before they can be used i.e displayed or printed. The required resolution plays a vital role in determining the size of the raster file generated. Here it is important to note that the size of the vector image to be converted always remains the same. It is convenient to convert a vector file to a range of bitmap/raster file formats but going down the opposite paths is harder. ( because at times we need to edit the image while converting from raster to vector)
2. Raster to Vector: Image tracing in computing can be referred to as vectorization and it’s simply the conversion of raster images to vector images. An interesting application of vectorization is to update images and recover work. Vectorization can be used to retrieve information that we have lost. Paint in Microsoft Windows produces a bitmap output file. It is easy to notice jagged lines in Paint. In this kind of conversion, the image size reduces drastically. As a result, an exact conversion is not possible in this scenario. Due to various approximations and editing that are done in the process of conversion the converted images are not of good quality.

Differences between Vector and Raster graphics

The main difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths. A raster graphic, such as a gif or jpeg, is an array of pixels of various colors, which together form an image.

This article is contributed by Ankit Jain. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.