Vector Graphic

A vector graphic is an image that isn't made up of individual pixels, but of computational instructions for lines, curves, and shapes. This keeps it razor-sharp at any size – from stamp-sized to building-sized.

A photo on a screen consists of millions of tiny colored dots, the pixels. If you zoom in far enough, you’ll eventually see little blocks. A vector graphic is built differently. It doesn’t store points, but descriptions: a circle with this center point and this radius, a line from here to there, this area in red. The computer recalculates the image every time it’s displayed. That’s why it stays sharp no matter how much you enlarge it.

Why logos are almost always vectors

A company logo has to work on very different surfaces. It appears on a business card, on a website, on a billboard, and sometimes on a truck. If it only existed as a raster image, you’d need a separate file for every size. And if you enlarge it too much, you get blurry edges. As a vector graphic, a single file is enough for all cases.

Then there’s file size. A simple logo with twenty shapes might need just a few kilobytes. The same motif as a raster image at poster size can take up several megabytes. For websites, this is a concrete advantage, because small files load faster.

A third point is often overlooked: vector graphics can be edited afterward. You can swap out a color or move a shape without redrawing the image. With a raster image, you’d have to paint over individual pixels.

Curves made of numbers instead of dots made of color

The most important building blocks of a vector graphic are so-called Bézier curves. These are curves defined by a few control points. You can picture it like a flexible wire that you pull at certain points. Letters, symbols, and entire illustrations are assembled from such curves. Each shape also gets additional information about fill color, border thickness, and stacking order.

For a screen to display the graphic, it ultimately still has to be converted into pixels. This step is called rasterizing. But it only happens at the moment of display, and always at whatever resolution is currently needed. The stored file itself remains free of pixels.

This also reveals the limits of the method. A portrait photo consists of countless subtle color gradients without clear edges. Describing this structure in formulas would be laborious and would look poor. That’s why photos continue to be stored as raster images, for instance in JPEG format. Vectors play to their strengths with clear shapes: logos, text, diagrams, maps, interface elements.

SVG files, map apps, and AI image tools

The most common vector format on the internet is called SVG. The abbreviation stands for Scalable Vector Graphics. Almost every icon on modern websites – the magnifying glass symbol for search, the three-line menu icon – is an SVG file. If you open one in a text editor, you’ll actually see readable text with coordinates. For print and graphic design, the formats PDF, EPS, and AI are also common.

You also encounter this principle daily outside of icons. Digital maps in navigation apps are vector-based. That’s the only reason you can zoom in and out smoothly while street names stay readable and rotate along with the view. Fonts work on the same principle: each letter is a stored curve shape.

In AI news, the term comes up in two contexts. Image generators like Midjourney or DALL·E initially produce raster images, not vectors. That’s why several providers now offer automatic conversion, so-called vectorization. A program searches for edges in the raster image and lays curves over them. The result is usable for simple motifs, but rarely convincing for photos. In parallel, there are models that generate SVG code directly – a research field that is currently developing rapidly.

Subscribe free. Unsubscribe the second it sucks.

High-signal news across AI, business, UX, and tech. Every morning.