What are vector graphics? A guide to the infinitely scalable images, and how they differ from other images

• Vector graphics are infinitely scalable images created using mathematically defined elements.
• In simpler terms, you can make a vector graphic as large or small as you want without losing any quality.
• Vector graphics are made from points, lines, curves, and color fills, making them different from regular "raster" images.

If you have an interest in computer graphics or design, it doesn't take long to realize there are two different kinds of graphics: vectors and rasters.

Although you might not be able to tell the difference between the two at first glance, they're fundamentally different in how they're created and used.

What to know about vector graphics

Vector graphics are images created using elements that are independent of the size of the image, and common vector file formats include EPS and SVG.

Complimentary Tech Event

Transform talent with learning that works

Capability development is critical for businesses who want to push the envelope of innovation.Discover how business leaders are strategizing around building talent capabilities and empowering employee transformation.Know More

In contrast, raster graphics are made from pixels - think of a raster image like a grid of tiles, in which each tile is designated a specific color. Stand sufficiently far back, and the raster image becomes obvious. Common raster file formats include JPG and PNG. They're more popular for general use.

The concept behind raster images is fairly easy to understand, especially since you probably have some experience with pixels on a computer screen.

Vector graphics aren't as intuitive, though. Vector images are made from "vector primitives," which are mathematically defined elements like points, lines and curves, as well as colors that fill in-between. By combining primitives, you can draw sophisticated and complex images. We'll break down exactly what that means in a bit.

The differences between vector and raster images is even apparent in the tools that professionals use to create and edit them. Adobe Photoshop, for example, is a raster editing program that lets you change the color of pixels within the image. In other words, Photoshop is a sophisticated paint program, because everything the program does relies on manipulating the color of pixels.

But Adobe Illustrator is a vector design program where there's no pixel-level color control. Instead, you work by drawing using a library of lines, points, and other shapes. These shapes aren't defined by the pixels on screen, but instead by a mathematical algorithm.

The differences between vector and raster graphics

So rasters use pixels, and vectors use math. But what does that really mean for the user? Why aren't they interchangeable?

In a nutshell, vector graphics' mathematical nature makes them "resolution independent," or able to keep the same quality at any size. You can increase a vector image's size by 1000 percent, and it would look exactly the same - no blurriness or washed out colors. This means that artists and designers don't need to worry about what size their image will be printed at, because it'll always look good.

A raster image, on the other hand, is purpose-made for a certain resolution, and the image is literally defined as a grid. If you could inspect the code contained in a raster image file, you would see that it tells the computer exactly which color to place in each pixel.

This means that a raster image will lose sharpness if you display or print it larger than it was intended - you've no doubt seen this when zooming in on a detail in a JPG image.

It's also worth noting that while a vector graphic can be easily converted to a raster - the raster image is "locked in" at the resolution specified when it was converted - a raster image can't generally be converted to vector, though some tools can convert simple raster images to vector in a limited way.

Pros and cons of vector and raster images

The bottom line is that the two kinds of graphics have their own advantages and disadvantages.

Vector graphics

• Infinitely scalable with no loss of sharpness.
• Easily convertible to a raster image at a given resolution for importing into other projects.
• Excellent for use in illustrations on the web and in print because the files can scale to any size, and illustrations are easy to represent with lines, curves, and color fills.

Raster graphics

• The best choice for photographs because raster images allow for precise and detailed color control on a pixel-by-pixel basis.
• Not scalable, so it loses quality when enlarged.
• Usually can't be converted to vector graphics.