A raster image stores the result: the color of every point. A vector image stores the recipe instead: "draw a line from here to there, bend it like this, fill the area with blue." The actual drawing is produced only when it is displayed, at the requested size. That is why a vector logo is crisp both on a business card and on a billboard.
The basic elements
Every vector program, from professional editors to open-source ones, works with a few concepts:
- Anchor point: a position (x, y) the path passes through.
- Segment: the stretch joining two anchors, straight or curved.
- Handles (control points): points that are not on the path but determine its curvature.
- Path: a sequence of segments, open or closed.
- Fill and stroke: the color (or gradient) inside and the style of the line along the edge, with width, caps and joins.
Everything is built from these elements, from icons to typefaces.
The cubic Bézier curve
The most widely used curve is the cubic Bézier, defined by four points: P0 and P3 are the endpoints, P1 and P2 are the control points. The curve leaves P0 heading towards P1, arrives at P3 coming from the direction of P2, and in between is "pulled" by the controls without passing through them.
The formula, for a parameter t running from 0 to 1, is:
B(t) = (1-t)³·P0 + 3(1-t)²t·P1 + 3(1-t)t²·P2 + t³·P3
You don't need to memorise it, but it helps to understand its consequence: the curve is always contained within the polygon formed by the four points (its convex hull). That is why, when you drag a handle, the curve "follows" it predictably.
There is also the quadratic Bézier, with a single control point, used for instance in TrueType fonts. It is simpler but less flexible: some shapes need more segments.
De Casteljau's algorithm
There is an elegant, geometric way to find a point on the curve. Take t = 0.5: find the midpoint between P0 and P1, between P1 and P2, between P2 and P3; then the midpoints between those three; then the midpoint between the last two. That is the point on the curve. The procedure also splits the curve into two smaller curves, and this is how many programs subdivide it into straight segments short enough to draw.
Continuity: why some curves look "broken"
When two curved segments meet at an anchor, the join can be:
| Node type | What happens to the handles | Visual effect |
|---|---|---|
| Corner | independent | sharp corner |
| Smooth | aligned on the same line | no corner, but a possible curvature "jump" |
| Symmetric | aligned and equal in length | very soft transition |
The curvature "jump" is what a trained eye notices in hastily drawn logos: the line has no corners, but at one point it seems to change speed suddenly. Type designers spend a great deal of time on exactly this.
How to draw a good path
After many years of fixing files, the rules I recommend are few and concrete:
- Few anchors: more points do not mean more precision, but more irregularity. A circle is made with four anchors.
- Anchors at the extremes: place points where the curve reaches its horizontal or vertical maximum, with horizontal or vertical handles.
- Proportionate handles: a practical rule is that a handle should not exceed roughly a third of the segment's length.
- Closed paths for filled shapes: a fill on an open path behaves differently from program to program.
- Outline strokes when needed: for logos meant for printing or cutting, convert strokes into filled shapes so the width does not depend on the program.
From vector to screen
The screen is still made of pixels. The process that turns a path into pixels is called rasterisation: the program works out which pixels fall inside the shape and, for edge pixels, how much of them is covered. This partial coverage produces antialiasing, those intermediate-colored pixels that make curves look smooth.
To decide what is "inside" a complex shape that may intersect itself, there are two rules: nonzero and even-odd. The difference shows, for example, in a star drawn with a single path: with even-odd the central pentagon stays empty, with nonzero it is filled.
When vector is not enough
Vector graphics are ideal for logos, icons, diagrams, maps, typefaces and flat-color illustrations. They become inefficient for photographs: describing every variation of light with curves would take millions of elements, and the file would be heavier and slower than a good JPEG. "Auto-trace" tools work well on clean drawings and poorly on photos.
Display cost matters too: an illustration with tens of thousands of paths, shadows and gradients has to be recalculated every time the zoom changes, and on modest devices it can slow things down.
In short
- Vector graphics describe shapes with paths, anchors and handles; pixels are computed only at display time.
- The cubic Bézier curve uses two endpoints and two control points and stays within their convex hull.
- Node type (corner, smooth, symmetric) determines how soft the joins are.
- A few well-placed anchors produce better curves than many random points.
- Vector is ideal for logos and icons, not for photographs.
