Vector Graphics
Definition
A vector file is a set of drawing instructions in a coordinate system. A circle is a centre, a radius and a fill: a few dozen bytes that look equally crisp at 16 pixels or on a billboard. On the web the format is SVG; in print and design work the same idea appears as PDF, EPS and AI. Because the description is resolution-independent, there is no native size to exceed and nothing to interpolate. Text inside a vector file usually stays real text, so it can be selected, searched and translated. The one thing vectors are bad at is photographs — there is no sensible way to describe millions of irregular pixels as paths, and auto-traced photos come out both larger and worse than the original.
Why It Matters
For logos, icons, diagrams and charts the saving compounds. A wordmark as a 3 KB SVG replaces a PNG at 1x, 2x and 3x, in light and dark versions, and never needs re-exporting when a new screen density arrives. An icon set of twenty-four icons at three densities is seventy-two raster files and seventy-two potential requests; the same set as one sprite is a single file of a few kilobytes. Colour can be set from CSS, so a theme switch costs nothing extra. Against that, a vector file is markup a browser has to parse and render, so a wildly complex illustration with tens of thousands of paths can be slower to paint than a flat image of the same picture.
How It Works
The renderer reads the markup and rasterises it at the current device resolution every time it draws. A path element carries a d attribute made of move, line, cubic and arc commands; groups, transforms, gradients and clipping paths build up the rest. The viewBox establishes the internal coordinate space, and the display size comes from CSS, which is what lets one file fill any box without distortion. Because the payload is plain text it compresses very well — gzip or brotli commonly takes 60 to 80 percent off — and a pass through SVGO, rounding coordinates to two decimals and stripping editor metadata, often halves what a design tool exported before compression even starts.
Real-World Example
A studio keeps its brand kit on 99helpers at studio-kit.99helpers.site. The logo is a single logo.svg of 4.2 KB, about 1.5 KB once compressed in transit, and it replaced six PNG exports that came to 310 KB between them. The favicon points at the same shape, the dark-mode version is the identical file with one CSS variable changed, and when the mark was tweaked, one upload updated every place it appears.
Common Mistakes
- ✕Tracing a photograph to vector — the output is bigger than the JPEG, slow to render and visibly wrong
- ✕Shipping the raw design-tool export — hidden layers, editor metadata and long decimals can triple a file that should be a couple of kilobytes
- ✕Converting text to outlines out of habit — it kills selection, search and screen reader access, and is only needed when the font cannot be embedded
- ✕Assuming vector always means smaller — an illustration with tens of thousands of paths is heavier and slower than a well-compressed raster version
Related Terms
SVG File
An SVG file is an image written as XML markup, describing shapes and paths instead of a grid of pixels. Because the browser draws it at render time, one file stays sharp at any size.
Raster Graphics
Raster graphics are images stored as a grid of pixels, each holding its own colour. Photographs, screenshots and scans are all raster, and enlarging one beyond its native size makes it soft or blocky.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Favicon
A favicon is the small icon a browser shows for a site — in the tab, in bookmarks, in history and on a phone home screen. It is a file in the site, pointed to from the HTML or found at a fixed path.
Brotli Compression
Brotli is a lossless compression format for HTTP responses, published by Google in 2015 and supported by every current browser. On text it usually beats gzip by 15 to 20 percent, at the cost of more CPU time to compress.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →