---
title: "Vector graphics"
description: "Vector graphics describe images with geometric shapes, so they scale to any size without quality loss. Learn the difference from raster, formats and uses."
url: "https://nodea.io/en/glossary/vector-graphics"
lang: "en"
updated: "2026-07-13"
---

# Vector graphics

> Vector graphics describe an image using mathematical geometric shapes rather than pixels, so it scales to any size without losing sharpness while keeping file size small.

**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](https://nodea.io/en/glossary/bitmap), 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](https://nodea.io/en/glossary/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.

### What is the difference between vector and raster graphics?

Raster graphics (bitmaps) are a grid of pixels, so enlarging them loses sharpness and shows visible pixelation. Vector graphics describe shapes with mathematical formulas, so they look crisp at any size. Bitmaps are better for photographs; vectors are ideal for logos, icons and illustrations.

## Related

- [SVG](https://nodea.io/en/glossary/svg)
- [Bitmap](https://nodea.io/en/glossary/bitmap)
- [PNG](https://nodea.io/en/glossary/png)
- [Favicon](https://nodea.io/en/glossary/favicon)
- [Optimization](https://nodea.io/en/glossary/optimization)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/grafika-wektorowa.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)