Vector vs. Raster Graphics

Goggwell · December 20, 2014

Now, today I shall be talking to you about Vector and Raster Graphics.

What is a Vector Graphic?

A vector graphic is an image or picture that does not pixelate (become blurry) when you make it bigger or zoom in. Vector graphics are usually created on Adobe Illustrator, an application designed to create scalable vector graphics (SVG).

People use SVGs in websites and such to add a textural design to the theme. Vectors also play a major role in the designing industry in terms of print as well. Since you can scale vectors, you can place the image on any form of media. From a device to a billboard.

What is a Raster Graphic?

A raster graphic is the kind of image you run into every day. A JPG, PNG, TIFF or any of those files are raster graphics. When you scale a raster graphic, or zoom in, it becomes blurry. That is because raster graphics run on a pixel-based system instead of shapes, like vectors.

Photoshop is a perfect example of a raster graphic application. It does not save in vector format, just a regular image file or as a PSD (Photoshop file). You would commonly find raster graphics in a forum signature, or perhaps images in a portfolio or profile picture.

Which is better?

Many people would say 'VECTOR' after reading this, but I can assure you that both types of graphics are equally important in the design industry. Raster graphics are easier to import than vectors, so that makes them more usable.

Raster graphics are also versatile, meaning that they can come in any form you wish just by writing a few simple lines of CSS and JavaScript/jQuery code.

Vectors are also interchangeable, but they do not have the same options.

BONUS:

Looking for fonts? Check out this website for the Top 100 fonts of 2014:

http://www.awwwards.com/the-100-greatest-free-fonts-for-2014.html

They're all free!

Rook · December 20, 2014

Both are awesome! I only like vector graphics because of the lossless quality they have and the fact that you can animate parts of them or the full image in CSS/Javascript!

Updated December 20, 2014 by DiDA