Hello! Welcome to the first lesson of Module 5, Vector Illustration Techniques.
In our last lesson, you learned how to export your designs from Figma into different formats like JPG, PNG, and SVG. You might have noticed that SVGs were treated differently—recommended for logos and icons because of their scalability. Today, we're going to dive deep into the "why" behind that distinction.
This lesson addresses a core concept in all of digital design. Your learning outcome is to explain the difference between vector and raster graphics. Understanding this is not just technical knowledge; it's fundamental to making professional design choices and is the essential first step before we learn to create custom illustrations, icons, and logos in Figma.
1. The Two Worlds of Digital Images: Pixels vs. Paths
Every digital image you see falls into one of two categories: raster or vector. They are built on entirely different principles.
Raster graphics are made of a grid of tiny squares called pixels. Think of it like a digital mosaic or a piece of graph paper where each square is filled with a single color. When you put thousands of these colored squares together, they form a detailed image. Photographs are the most common example of raster images.
Vector graphics, on the other hand, are not made of pixels. They are built from mathematical formulas that define points, paths, lines, and curves. Think of it as a set of instructions that tells the computer how to draw the image. For example, a vector circle is defined by its center point and radius, not by a grid of pixels.
These two images provide a clear visual comparison. Notice how the zoomed-in vector image remains smooth, defined by its anchor points, while the raster image breaks down into visible pixels.
2. The Key Difference: Scalability
The most critical difference between vector and raster graphics becomes apparent when you try to resize them.
- When you enlarge a raster image, the computer has to guess what colors to fill the new pixels with. This makes the image look blurry, jagged, or "pixelated." The quality degrades because the image has a fixed number of pixels.
- When you enlarge a vector image, the computer simply recalculates the mathematical formulas. The quality remains perfect, no matter how large you make it.
This property, called infinite scalability, is why vector graphics are essential for logos, icons, and other brand assets that need to be used in many different sizes—from a tiny app icon to a massive billboard.
Let's see this in action directly within Figma.
Figma for Edu: Working with vector tools
The following clip from Figma's educational channel provides a perfect demonstration. The presenter starts with a vector shape, then converts it to a raster image (a process called 'rasterizing') to show you exactly what happens when you zoom in.
Watch from 13:50 to 17:58. Pay close attention to the moment the vector shape is rasterized and how it becomes pixelated when you look up close. The presenter also gives excellent examples of when to use each type.
As a quick and simple animated summary of this concept, you might also find this short video helpful.
Vector vs Raster Graphics | Buddy Media
This very short video from Buddy Media offers a concise, animated explanation of the core differences in scalability and file size.
Watch from the beginning to 00:49 to see a clear animated comparison of scaling a vector versus a raster graphic.
3. Making the Right Choice: When to Use Each Format
As a designer, your job is to choose the right tool for the task. Neither format is inherently "better"—they are simply suited for different purposes.
To get a comprehensive overview, let's turn to a well-structured article that breaks down the specifics.
Raster vs Vector: What's the Difference and When to Use Each?
The article 'Raster vs Vector' from Zeenesia provides clear guidance on the strengths, weaknesses, and ideal use cases for each format. It also includes a helpful comparison chart.
Please read the following sections from the article: 'What Are Raster Graphics?': Focus on its strengths and limitations. 'What Are Vector Graphics?': Focus on its strengths and limitations. 'Raster vs Vector: Core Differences': Study the comparison table closely. 'When to Use Raster Graphics' and 'When to Use Vector Graphics': These sections give you practical, real-world scenarios. This reading will solidify your understanding of which format to choose for any given project.
Here is a summary table based on what you've just learned, which you can use as a quick reference:
| Aspect | Raster Graphics | Vector Graphics |
|---|---|---|
| Composition | A grid of pixels | Mathematical paths & points |
| Scalability | Loses quality when scaled up | Infinitely scalable with no quality loss |
| Best For | Photographs, complex digital paintings, detailed textures | Logos, icons, typography, illustrations |
| File Size | Larger, especially for high-resolution images | Generally smaller for simple shapes |
| Common Formats | JPG, PNG, GIF, TIFF | SVG, AI, EPS, PDF |
Test your understanding!
You are designing a brand identity for a new coffee shop. You need to create a logo that will be used on their website, business cards, coffee cups, and a large sign outside the shop. Should you create the logo as a vector or raster graphic? Why?
Show answer
You should definitely create the logo as a vector graphic.
The primary reason is scalability. The logo needs to look sharp and professional at many different sizes, from the small print on a business card to the large outdoor sign. A vector graphic can be scaled infinitely without any loss of quality, ensuring the brand looks consistent and crisp everywhere. A raster logo would become pixelated and unprofessional when enlarged for the sign.
Conclusion
Great work! You now understand one of the most fundamental concepts in graphic design. Knowing the difference between raster and vector graphics empowers you to make informed decisions that will directly impact the quality and versatility of your work.
Here are the key takeaways from this lesson:
- Raster graphics are made of pixels and are ideal for complex, detailed images like photos. They are resolution-dependent and lose quality when scaled up.
- Vector graphics are made of mathematical paths and are perfect for logos, icons, and illustrations. They are resolution-independent and can be scaled to any size without losing quality.
- The choice between vector and raster depends entirely on the project's requirements, particularly the need for scalability.
In our previous lessons, we've been working with pre-made vector shapes in Figma. Now that you understand what vector graphics are, you're ready to create your own. In the next lesson, we will get practical and learn to use the pen tool to create and edit custom vector shapes and paths. This powerful tool will unlock a new level of creativity in your designs.