Drawing with vectors

Vector versus raster—which is better? This is a battle of the ages and one of the greatest struggles many designers face when creating graphics. The file format depends significantly on what you’re trying to accomplish, and this article will analyze these options for you.

When you create a logo, poster, or card design (for a job, a client, or your own business), you’ll have the choice between vectors and raster graphics.

Long story short, you should always use vector graphics for anything professional, like logos or printed material. Clarity and editability are two of the most significant benefits of the vector format, though there are several other reasons.

But let’s start with the basics.

What’s a vector?

Vectors are digital shapes of lines and curves that create an image based on a mathematical equation. Also called paths, these lines and curves allow designers to scale images as simple as a shape or as complex as a full-blown illustration with masked effects.

What about raster graphics?

Raster graphics are made up of pixels, the tiny colored squares you see when zooming into the image. The most well-known format for raster images is the .jpeg (or .jpg) file, but formats such as .png, .webp, .gif, and .tiff are also pixel-based.

Any photo you take with your phone or camera is a raster image.

Raster graphics are best suited for:

• Photography: All digital photos are naturally raster images, capturing detailed and color-rich imagery that’s best manipulated and refined in its native pixel-based form.
• Digital art and textures: Raster tools are preferred in digital painting and photo editing software because they naturally mimic traditional media textures and brush strokes.
• Certain types of web graphics: For images where file size is crucial, such as on websites, compressed raster formats like .jpeg and .png are essential. They allow for faster loading times without a significant loss in quality for complex images.

Raster graphics excel in rendering detailed, high-resolution images such as photographs and complex textures. These graphics are invaluable when precise color rendition and gradient transitions are needed, often essential in digital art and photo editing.

While raster formats like .jpeg were traditionally used for their wide compatibility and compression, web developers increasingly favor vector graphics like .svg for icons and simple illustrations due to their scalability and efficiency.

Notably, the .webp raster image format is becoming popular for its ability to provide high-quality images at smaller file sizes. This file type effectively bridges the gap between the fidelity of traditional raster formats and the versatility of vectors. It’s particularly effective for web images, allowing for faster load times and improved performance without sacrificing visual quality.

Vector vs raster

Image scalability and quality

If you’ve ever tried to resize a raster graphic like a .jpeg, you know how difficult it can be to try and keep the quality high.

Because raster graphics are made of a fixed number of pixels, their image becomes distorted and low-quality once you expand them too far beyond their original dimensions. This isn’t the case with vectors.

As mentioned, a vector’s most significant advantage over its raster rival is its infinite scalability. It doesn’t matter how much you scale them.

You won’t see any loss in quality or clarity, and the edges will always appear smooth.

You only have to design a vector image once, and then you can alter its size as much as your project requires.

For example, if you create a vector logo, you can make it large enough for a printed banner or small enough for a mobile ad without losing any details. It’s as easy as that.

Difference in file size

Raster files typically take up a larger file size because they’re made from pixels that carry more weight than vector images, which are inherently made from lines of code.

A raster format like .jpeg uses compression to reduce file size but can introduce artifacts, while the .png format maintains exact color fidelity and supports transparency.

But because vectors use mathematical descriptions for shapes, they allow for immense scalability with minimal file size increase.

For instance, a 1:1 aspect ratio image at 300dpi will contain 300px of information, while a vector square will contain just four points, one for each corner. The vector’s mathematical formula connects the points and fills in the colors.

See the table below showing the difference between .jpeg, .png, and .svg file sizes:

Vector graphics load faster, making them excellent in web- or mobile-based applications. And they have many other uses.

Editability and design iteration

Design iterations are a must in any creative process, but they can also be a painstaking process when new ideas constantly pop up.

Maybe you want to change the color of your logo or rearrange some of its components. It should be easy and intuitive to make changes during the creative process.

This ability to seamlessly make corrections or alter a design file is essential when dealing with clients or operating in a fast-paced, deadline-driven work environment.

In vector-based programs like Linearity Curve, you can quickly change the color values in RGB or HSB by inserting a specific HEX code or selecting your preferred choice by using the color well.

Using vectors for animation

Using mathematical vectors for animation involves representing various aspects of motion, such as position, velocity, and acceleration. 

Vectors provide a concise and powerful way to describe motion in 2D and 3D digital spaces. Here are different examples of vectors commonly used in animation:

Position vectors

In animation, objects are typically represented by their position in a space. This position can be identified using a position vector, which defines the object's location in relation to a reference point.

For example, you may be animating a company logo. The position vector represents the coordinates of a point where you want to place a specific element in the logo within the animation frame. 

If the logo has text and an icon, the position vector might specify the exact location (in pixels) where the icon should be placed relative to the text on a timeline.

Linearity Move, our powerful marketing animation software, has impressive animation features that enable you to import vector graphics from other design platforms and animate them. 

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started

Velocity vectors

Velocity is the rate of change in an object's position over time. It’s a vector quantity that includes both magnitude (speed) and direction. 

If you're designing a motion graphic for a presentation, the velocity vector could represent the speed and direction of an animated element like a title or a transition effect. 

If you want a title to smoothly slide in from the left at a speed of 100 pixels per second, the velocity vector would indicate the direction (left) and magnitude (100 pixels per second) of its movement.

Try vector animation using one of our pre-animated Linearity Move templates below:

Get this template

Get this template

Acceleration vectors

Acceleration represents the change in velocity over time. Like velocity, acceleration is also a vector quantity, indicating both magnitude and direction. Animators can use acceleration vectors to create realistic movements such as speeding up and slowing down (called easing) or changing direction.

When a user swipes to navigate from one screen to another, the acceleration vector determines the smoothness and speed of the transition.

Linear motion

Linear motion refers to motion along a straight path, where an object travels in a constant direction at a constant speed. In animation, linear motion can be represented by straight-line paths traced out by position vectors over time. 

Think about designing a website with parallax scrolling effects. The linear motion could describe the smooth scrolling motion of background images or content sections as users scroll down the page. 

Each element moves at a constant speed and in a straight line, creating a visually appealing and engaging browsing experience.

Vector operations

Various vector operations, such as addition, subtraction, and scalar multiplication, are employed in animation to manipulate motion. 

For example, adding a velocity vector to a position vector at each frame updates the object's position to simulate motion.

By leveraging vectors and their properties, animators can create lifelike animations that accurately portray the motion of objects in space.

Why it’s better to design with vectors

While raster graphics still have a place in graphic design and animation, vector graphics provide high-quality, scalable images at smaller file sizes.

We’re not saying it’s always better, but designing with vectors is versatile for many business applications. It should be your primary choice for designing logos, signs, illustrations, infographics, creating animations, and UX/UI design.

They're also used in web-based objects, rendering 2D or 3D computer animation, laser engraving, and everything in between.

Consider using a vector design platform for your next digital project. The Linearity software suite is seamlessly integrated to empower you to design and animate vectors that captivate.

Are you ready to try new innovative design and animation software? Get started for free below, or check out our Pro and Org pricing plans. We also offer special pricing for students and teachers.

Frequently asked questions