Software & Apps > Design
Introduction to Vector Animation
The technique often allows cleaner, smoother animation
Adrien-Luc Sanders
Art Institute of Houston
Adrien-Luc Sanders is a former writer for Lifewire, animator, web designer, and graphic designer with a background in computerized design and animation
Chud / Getty Images
Animation & Video
Vector animation refers to animation where the art or motion is controlled by vectors rather than pixels. It often allows cleaner, smoother animation because images are displayed and resized using mathematical values instead of stored pixel values. Before understanding the science behind vector animation, it's important to know the difference between the two major graphic types: bitmap and vector graphics.
One of the most commonly used vector animation programs was Adobe Flash (formerly Macromedia Flash), which is no longer available as of January 2021.
Introduction to Bitmap and Vector Graphics
Many of the image types people are most familiar with consist of a grid of pixels in which each pixel or bit contains information about how the color should be displayed. JPEGs, GIFs, and BMP images, for instance, are all pixel images known as raster or bitmap graphics. These bitmap graphics have a fixed resolution or a number of pixels in the grid, measured by pixels per inch (PPI). A bitmap's resolution limits the graphic's size, as it cannot be resized without losing image quality. Everyone on the internet has run into a bitmap that's been blown up until it looks blocky or pixelated.
Vector graphics, on the other hand, consist of paths defined by a start and endpoint. These paths can be anything from a line to a series of lines that create a shape like a square or a circle. Despite the simplistic nature of a vector's building block, paths are used to create extremely complex diagrams. Each path object carries its own mathematical statement that defines how the object should be displayed.
Some of the most common vector formats include AI (Adobe Illustrator), DXF (AutoCAD DXF), and CGM (Computer Graphics Metafile). Vector graphics are also found in EPS (Encapsulated PostScript) and PDF (Portable Document Format) formats.
The most important difference between vector and bitmap graphics is that vector graphics are resolution independent, meaning they are truly scalable. Because vector graphics are not made up of a fixed grid, they can be resized without losing image quality. This makes them ideal for a variety of graphic design applications such as logos, which need to be sized down for something small like a business card or sized up for something as large as a billboard sign.
Vector Animations Basics
While some vector editors (computer programs that compose and edit vector graphics) support animation, the most popular programs for animation creation are specifically geared for that purpose. While animations can include bitmap graphics, most use only vector-based graphics because, as we learned earlier, they scale better and typically take up less space. These vector animations generally have a clean graphic appearance compared to their alternatives.
Internationally, there are other vector formats and animators. For instance, EVA (Extended Vector Animation) is a web-based vector file format popular in Japan where EVA Animator software is widely used. The primary difference between the EVA format and other vector formats is that it records only the changes in the vector over time rather than recording information per frame. EVA formats also tend to be smaller than their alternatives.
What Is an AI File?
Vector vs. Bitmap Images
SVG Files: What They Are and How to Open & Convert Them
Definition of Bitmap and Raster Image
How to Reduce GIF File Size for Better Website Performance
How to Use the iPhone Camera
Why You Should Be Using SVG on Your Website
How to Draw the Outline of a Shape With Photoshop Elements
10 Best Free Photo Resizers
The 13 Best iPad Drawing Apps of 2023
The Best Mac Desktop Publishing Software of 2023
What Are FH10 and FH11 Files?
What Is Graphics Software?
What Is the Screen Door Effect?
What Is an EPS File?
What Is a Gerber (GBR) File?