What Are Vector Graphics

Vectorize It, Don’t Criticize It: What Are Vector Graphics?

What are vector graphics?

A gruesome crime has been committed under cover of darkness. No eyewitnesses. No leads. Finally, after some digging, CCTV footage from the local gas station is found with someone who might be the perpetrator.

The gruff detective in charge of the investigation looks over the shoulder of the tech wiz combing through the clip and squints at the grainy image that pops up. “Can we blow it up and enhance it?” he asks. Behind the fourth wall the question is always met with the affirmative, but the only reasonable answer in this situation is no. Laughably easy image enhancement; it’s one of the most overused tropes on TV and in the movies.

You can make alterations to the contrast in order to sharpen the image somewhat, but pixels that don’t exist cannot be added to enhance the image. This is because photos, or in this case the still from the video footage, contain a finite number of pixels. Because they are made of pixels, they are raster graphics as opposed to vector graphics. Here, we’ll delve into the fundamentals of vector images formats and cover the basic differences between raster and vector formats.


The overview: vector vs. raster graphics

In order to understand vector graphics, we must understand the two most common image file formats. There are two major image file formats: raster and vector. Each format is useful for certain things. Raster format graphics (also known as bitmaps) are built using pixels. The term bitmap was derived from the fact that images in that format are literal maps of bits (or pixels) that are arranged in a specific layout.

A certain number of pixels construct a raster image. The “before enhancement” still of the CCTV footage that looks pixelated and blocky is what happens when you scale up a raster image. Vector images, conversely, are constructed with mathematical equations as opposed to pixels. Let’s take a closer look at vector graphics as well as the different use cases for each file format.

Vector graphics

 

Sure, vector graphics are math equations, but what does that mean? What is a vector graphic, exactly? A vector graphic is an image constructed using mathematical equations or basic geometric elements like points, lines and shapes. In computer graphics, these shapes and figures are called primitives because they are the most basic figures to which a shape can be broken down. They can be combined to create more complex figures using graphics software.

The primary function of vector format graphics is to be source files for hard-edged graphics, logos and illustrations. Vector graphics are typically used to create simpler images that will be scaled up or down depending on the use case. Vector files must be converted to raster for use on the web or to be printed, typically in a .jpg or .png format.

There are so many file formats out there, it’s easy to get confused regarding which is which. There are four common vector file types: .ai, .eps, .pdf, and .svg. Let’s take a look at what each format means:

.AI (Adobe Illustrator): A proprietary Adobe Illustrator file type that can only be created or edited with AI.

  • Best used for: Logos, graphics and illustrations

.EPS (Encapsulated PostScript): A vector and raster (bitmaps) file that may contain graphics, illustrations and text.

  • Best used for: Saving and transmitting art between different file formats and graphics editors

.SVG (Scalable Vector Graphic): A vector image format that supports interactivity and animation, defined by XML text files. Scalable vector graphics were developed by the World Wide Web Consortium (W3C) starting in 1998. SVG allows three types of graphics: vector, bitmaps and text.

  • Best used for: Interactive graphics, which can be easily compressed (without loss of quality) because they are built of repeated text fragments

.PDF (Portable Document Format): .PDF is a file format that is used to present documents filled with text and images. PDF files contain all the information necessary to render the document in its entirety, complete with bitmaps, vector graphics, text and interactive layouts.

  • Best used for: Text-rich documents that may contain interactive forms

Raster graphics

 

Raster graphics are pixel based and have a finite number of pixels, which is determined by the image resolution. The file is composed of data detailing the color of each pixel. There are four common raster file types: .jpg, .gif, .png, .tif. Every raster image file contains the DPI (dots per inch) or PPI (pixels per inch) of the graphic. These numbers give the exact pixel count per respective file and an idea of the image quality.

Once you know the quality of your image, you have a better idea of what applications it is suited for. Lower-quality raster images that are acceptable for web pages are not suitable for printing purposes. Printable raster graphics are typically at least 300 DPI. Raster graphics (bitmaps) are not as versatile as vector graphics, but they are much better for photo editing.

Photo editing — why raster?
Digital photographs are made up of pixels, so a raster editor must be used to manipulate the image. Raster images are useful when you need to show smooth transitions between colors and shapes because of the subtlety afforded by the massive range of colors each pixel is able to produce. Raster images can be exceedingly more complex than vector files, which makes them ideal for projects like digital paintings.


Why vector graphics over raster?

Whether or not you’ll want to use vector graphics as opposed to raster graphics really depends on the use case. The basic rule of thumb is that vector graphics are better for simpler, scalable images, while raster graphics software is better for photo editing and digital paintings.

A key benefit of creating vector art is the ability to resize graphics without any loss in quality. Vector images are simply mathematical formulas, so it doesn’t matter if the image is blown up to 100 times its original size, the quality remains the same. Frequent resizing of images is easy to do with vector images because they are scalable up or down with little effort. Raster graphics, on the other hand, will delete data (in the form of pixels) if they are scaled down, which increases the blurriness of the image significantly if it is scaled back up.

The versatility of vector graphics is their main draw, and simple image manipulation is easy to do. Vector graphics are also fantastic for printing, as the creator can save an image in outlines and send it to the printer. This means that the shape will keep its integrity through transmission and printing.

Now that we’ve covered the fundamentals of vector and raster graphics, let’s take a look at which available products G2 Crowd reviewers have touted as some of the best on the market.


Adobe Illustrator
Adobe Illustrator vector graphics
Overview

Adobe Illustrator remains one of the most widely used pieces of software for graphic designers working with vector graphics. With a wide range of tools to aid in the creation and editing of digital graphics for multimedia use, Adobe Illustrator has been the industry standard for more than 20 years. With the Creative Cloud, you’re able to access new features as soon as they’ve been added.

Features
  • Draw and edit live shapes
  • Easy color application and alteration of imported photos
  • Masking with shapes
  • Huge database of effects
  • Professional typography and plug-in support for font manager

Inkscape
Inkscape vector graphics
Overview

Inkscape is a free and open-source, professional grade vector graphics program that anyone can use to create and manipulate vector graphics for print, web, video and mobile applications. The software is more accessible for those with little graphic design experience than a program like Adobe Illustrator. While it may be clunkier and more difficult to use for multi-layered projects, it is the premier open-source vector graphics software.

Features
  • Object creation (drawings, shapes, text, bitmaps tool, etc.)
  • Variety of tools for line creation (Bezier curves, straight lines, simple and filled paths using freehand drawing)
  • Z-order operations and interactive transformations
  • Support for many different file formats
  • Hierarchical layering with the ability to lock and unlock, rearrange layers

CorelDRAW
CorelDRAW vector graphics
Overview

CorelDRAW is a powerful tool that provides creation and editing features for both vector and raster (bitmaps) graphics. The suite has been a staple for many artists since the 90s and has consistently been adding features to improve the user experience.

Features
  • Bitmap-to-vector capability
  • Prominent interactive sliders
  • Touch-friendly user interface
  • Corel Font Manager
  • Start-up assistance materials and training

Affinity Designer
Affinity Designer vector graphics
Overview

Affinity Designer is a dual threat vector graphics and photo editing tool that touts shape control and vibrancy of color as two of its hallmarks.

Features
  • Professional retouching
  • Multi-layered compositions
  • Precise selections – down to individual strands of hair
  • Batch processing
  • Real-time full resolution preview of filter effects
  • Brush stabilization
  • Non-destructive operations

Sketch
Sketch vector graphics
Overview

Sketch is a powerful design tool made primarily to meet for website and app user interface design challenges. It features a ton of collaborative features and easy to use plugins to enhance functionality.

Features
  • Collaboration tools allowing you to sync, share and update symbols
  • Developer community powered plugins
  • Sketch syntax highlighter
  • Non-destructive editing
  • Cloud-based feedback generating artboard

Looking for Vector Graphics software? Check out the best vector graphics software according to G2 Crowd’s real-user reviews.