Vector graphics

Vector graphics are a way of representing a digital image in which each element is described not as a grid of pixels but through mathematical geometric objects — points, lines, Bézier curves and polygons, together with fill and stroke attributes. As a result, the image can be scaled, rotated and reshaped freely without any loss of quality, while the file stays lightweight. This is the opposite of raster graphics, which store the color of every individual pixel.

How vector graphics work

Instead of storing millions of pixels, a vector file contains instructions such as "draw a circle of radius r at point (x, y) and fill it with this color." The renderer — a browser or graphics program — converts these formulas into pixels only at display time, matching them to the current screen resolution. Key characteristics:

• Scalability — the same logo looks sharp on a business card and on a billboard.
• Small file size — simple shapes take a fraction of the space of a photo of the same display size.
• Editability — every element remains an independent object that can be moved and recolored.
• Resolution independence — no pixelation on high-density (Retina) displays.

The most popular vector format on the web is SVG, based on XML syntax; in print and design, AI, EPS and PDF dominate.

Vector graphics in practice

Vector graphics are indispensable wherever scalability and precision matter:

1. Logos and brand identity — a company mark must look good at any size and on any medium.
2. Icons and interfaces — SVG icons on a page stay crisp on every screen while remaining lightweight and styleable via CSS.
3. Illustrations and infographics — clean, geometric artwork editable without quality loss.
4. Favicons and responsive imagery — a single SVG serves many resolutions without separate variants.

Vectors are not suited to photography, however — the complex colors and tonal transitions of a photo are best captured by a raster format.