A Simplified & Mathematical Explanation of Vector Graphics With Visuals

The Mathematical Logic behind Vector Graphics

The entire Sailor except for the vest is a vector I created anchor point by anchor point.

What is a Vector?

As a designer, I bet you can explain a raster image. “It’s a collection of dots that make up an image yada, yada, yada.” Now, what happens when someone asks you, “but how exactly does a vector image work?”

This article will explain, in a simplified form, the mathematical logic of how a vector works and give you an interesting tidbit to share with your friends.

An Introduction to the Process

A vector image works on a Cartesian Coordinate System. Simply put, every anchor point has two numbers attached to it. These two numbers represent movement left, right (X), and up, down (Y) from an invisible anchor point in the exact center.

Let’s take a look below where a simple square is created from four anchor points. I have simplified the principle to single-digit numbers.

A 4-point square is transformed by %200.

Creating a Basic Square

On the left, the first square has four anchor points that are two units of distance from the invisible anchor in the center. If you transformed the first square by 200%, each anchor point adds 100% to each value’s existing direction. This is the only confusing part.

For example, if an anchor point has a value of X, Y= -2, 2 it becomes:

X,Y = -4, 4 or X=(-2 - -2) -4, Y=(2 + 2) 4.

Another example is if an anchor point has a value of X, Y= -2, -2 it becomes:

X,Y = -4, -4 or X=(-2 - -2) -4, Y=(-2 - -2) -4.

After the math is redone behind the scenes, the software connects the vector points to recreate the object. The beauty is the formula of Anchor Point=X,Y is the same for both squares and all you are doing is increasing the distance from the center point. Once you redraw the object, it is the same shape just larger.

This is how a vector can be any size and maintain its quality.

More than Squares

Many vector images have thousands of anchor points.

A triangle can take 3 vector points to make but a complex image will have thousands, hundreds of thousands, or even millions of anchor points.
This is why very complex vector graphics take very strong computers to edit. Every single anchor point needs to be mathematically redrawn and reconnected to its neighboring anchor point every time you move it.

Just Scratching the Surface

I only touched on anchor points in this article. I didn’t get into how two anchor points are connected — a straight line or a Bézier curve or how anchor points work in a 3d space. Please follow along for future articles where I dig deeper into design principles.

If you liked this story please recommend it to your friends and give me a clap.

If you liked the artwork, I post more of it on my Instagram.