Vector vs raster: what you need to know

They’re two words you’ll hear designers using all the time, but what’s the difference between vector and raster?

Vector vs raster design

Vector and raster design are two separate disciplines used in digital design. Based on fundamentally different technologies, they’re used for graphic design (vector) and image editing/digital art (raster), respectively.

These two different worlds often keep to their separate disciplines (and apps), but this article will look not only at the benefits and comparison of each independently, but also at how a clever mixed in-app ‘vector - raster’ approach can simplify your workflow.

Before moving on, it’s worth noting that both vector and raster designers expect to output their projects to a specific vector or raster graphic file format for sharing. Instead of looking at the merits of vector or raster graphic file formats here, we’ll be looking at vector and raster design prior to export instead.

What are vectors?

First some clarification. Vectors are drawn objects that are created using mathematical algorithms. They are made up of paths (think wireframe outlines!) which form the skeletal structure of the line, curve, shape, or text you draw. Each vector object’s path is controlled by adjusting nodes on the object’s path or by manipulating a surrounding bounding box; in addition, the object’s stroke and fill appearance can change with respect to colour, opacity, effect or adjustment.

Whichever the vector design app used, the vector design is created using the app’s toolset, layer structuring and features—it is stored as a proprietary project file until the design is output (exported) to a recognised graphic file format.

Why design in vectors?

Hopefully that explains what a vector is, so why use them?

  • Editability—Once drawn, vectors can be edited at any future date. Maybe you need to rework a commercial design (e.g., a logo) following client feedback or simply if yesterday’s design didn’t quite match today’s thinking. Either way, you have total flexibility; conversely, once a raster stroke is painted, it cannot be edited.
  • Scalability—Vector objects can be sized (scaled) infinitely with no loss of resolution. For example, you can create a vector logo design and create size variants of it for differently sized deliverables (from business card to banner) ‘on the fly’. This is without any pixelation or resampling anomalies you may encounter when resizing a raster logo’s dimensions. The logo (magnified left) always stays smooth-edged and crisp on the larger deliverable.
  • Precision drawing—Specialist vector editing tools let you form the vector object’s path into any shape and position imaginable. For example, the Pen Tool’s unique nodes and control handles gives fine control of every aspect of line drawing and stroke editing.
  • That drawing look—The look of your vector design will natively have a ‘clean’ appearance due to its mathematical origins. As an artist, you might be looking for a design that looks drawn rather than painted.

What are rasters?

Think of rasters as being designs made up exclusively of pixels. These pixels could be from photos, scanned images or be introduced by painting with raster brushes. Additionally, a process called rasterisation can destructively convert any vector object to a raster object, giving the widest program compatibility and most reproducible results on export.

Why design in rasters?

Let’s look at why you would pick raster design.

  • Photo-led approach—If your work is driven by image sources you’ll likely be working in pixels anyway. As such you can introduce and enhance your photos, scans, etc., from basic adjustments to finished digital art. Like vector-specific tools for vector design, a set of raster tools is offered in raster design, e.g. the Paint Brush Tool is commonly used.
  • Realistic textures—With professional brush textures (oils, sprays, charcoal, watercolour and more) based on an array of raster nozzles and underlying photo-sourced textures, you get brush strokes that are beautifully organic.
  • Freestyle creativity with no constraints—Like artists using real media brushes, the creative process is all about overpainting existing artwork, but with digital brushwork instead. This gives priority to freedom of expression rather than editability.

  • Personal preference—Some illustrators prefer raster design over vector design, working from large bitmaps that can be scaled down to sized deliverables; quality is assured.

Mixed-discipline vector and raster design

Many designers and artists have a desire to take advantage of both vector and raster design together in the same design, benefitting from each principle as needed. Traditionally, this is disruptive as this requires “handshaking” between separate vector and raster apps, which is both interrupting and time consuming.

At Serif, Affinity Designer offers vector and raster design under ‘one roof’—you won’t need to continually swap apps, instead just jumping, in an instant, between vector and raster workspaces called Personas, where you can add raster textures on demand.

Design split preview showing vector design only (left) and vector/raster design (right).

Conclusion

If the ability to edit ‘after the fact’ is important to you, then vectors are the way to go. You can also scale your vector design without affecting resolution.

For image-led design or pixel-based digital art, you’re natively working with raster tools for a more natural painting experience.

As an option, try mixed-discipline in-app working, where ‘vector - raster’ worlds come together so vector designs can be complemented with brushed raster textures.


Documentation manager
Andy manages our software documentation here at Serif and is our chief technical writer. In-between falling off his bike cycling into work, he keeps himself busy ensuring all our apps have up to date and accurate help content, and is editor-in-chief of our stunning Affinity Workbooks.
Credits & Footnotes

Car design sample © Isabel Aracama Image Copyright Todd Taulman Photography used under license/Shutterstock.com. La Vida Loca sample @ Steve Simpson