Vector Graphics: Drawing with Math
Zoom forever. Never lose a pixel.
Zoom forever. Never lose a pixel.
A raster image is a grid of colored pixels. Zoom in and you see squares. A vector image is a set of math instructions. Zoom in and it recalculates, staying sharp forever. Drag the zoom slider to compare.
Every curve in vector graphics is a Bezier curve. Two anchor points define the start and end. Control handles shape the bend. Drag the orange control points to reshape the curve.
Drag the orange control handles to reshape the curve.
Pierre Bezier developed these curves in 1962 for designing car bodies at Renault. Paul de Casteljau independently discovered them at Citroen. Today every font, logo, and vector illustration uses their math.
A path is a sequence of points connected by lines and curves. Close the path and you have a shape. Fill it with color and you have vector art. Click to add points and build a path.
Click to add anchor points. Close the path to make a filled shape.
You interact with vector graphics every day, usually without realizing it.
Every letter on your screen is a vector outline filled with pixels on the fly. That is why text stays sharp at any size. TrueType and OpenType fonts are Bezier paths.
Company logos must work on business cards and billboards. Vector formats (SVG, AI, EPS) ensure they scale perfectly. A raster logo would need a separate file for each size.
Google Maps renders roads, buildings, and labels as vectors. That is why you can zoom smoothly from continent to street level without everything becoming blurry.
App icons, interface elements, and emoji on modern devices are SVG vectors. They look crisp on any screen density, from 72 DPI monitors to 460 DPI phones.
You've learned how lines, curves, and shapes are stored as mathematical instructions instead of pixels. That is why logos, fonts, and illustrations are created as vectors: they are resolution-independent, infinitely scalable, and file-size efficient.
A vector is not pixels. It is a set of math instructions: "draw a line from A to B" or "draw a curve with these control points." The computer renders it fresh every time.
Almost every curve in vector graphics is a Bezier curve. Two anchor points plus control handles that shape the curve. Drag the handles, reshape the curve.
A vector can be the size of a stamp or a billboard. The math recalculates at any size. Raster images pixelate. Vectors never do.
Every vector shape is a path: a sequence of points connected by lines and curves. Close the path and fill it with color to make any shape.
Put your new knowledge into practice!