Vector vs Raster Graphics — The Difference in Plain Words
"Send us the logo in vector format" — a phrase that stumps every second business owner. What is a vector? How is it different from a regular image? And why does the designer wince at logo_final_2.jpg? Let's explain it so you never have to google it again.
Raster is a mosaic of colored dots — pixels. Vector is a drawing instruction: coordinates, curves, fills. You can't enlarge a mosaic without the dots showing; an instruction can be executed at any size — business card or building facade. That's why photos are always raster, and logos and icons are always vector.
Raster: a mosaic of pixels
A raster image is a grid of dots, each with its own color. Camera photos, screenshots, Photoshop images — all raster. Formats: JPG, PNG, WebP, GIF, TIFF.
Raster has one hard property — resolution, the dot count by width and height. A 1000×1000 file contains exactly a million pixels, and no more will ever appear. Shrinking is painless; enlarging forces the software to invent missing dots — the image blurs and edges get "staircases".
In return, raster does what vectors can't: smooth transitions across millions of shades. No formula describes a sunset photo more efficiently than an honest pixel grid.
Vector: a drawing instruction
A vector file stores no dots. It stores a description: "from point A to point B draw a curve with this bend, close the contour, fill with #21A038". Formats: SVG, AI, EPS, partly PDF.
When you open a vector, the software executes the instruction anew at whatever size is needed. The same icon is equally crisp at 16 pixels or 16 meters: instructions don't degrade with scale.
The rest of the vector superpowers follow:
- Tiny size. "A circle plus two arcs" takes hundreds of bytes. An SVG logo is usually several times lighter than its own PNG preview.
- Editability. Colors, shapes and text are parameters of the instruction, not baked pixels — see how to change a logo's color for the practical side.
- Perfect edges. The browser renders the vector for the specific screen, retina included — no mush.
Side by side
| Raster | Vector | |
|---|---|---|
| Made of | pixels | shapes and curves |
| Enlarging | loses quality | lossless |
| Photorealism | ✅ yes | ⛔ no |
| Logo file size | tens–hundreds of KB | a few KB |
| Recoloring | repaint | edit one line |
| Formats | JPG, PNG, WebP | SVG, AI, EPS |
When to use which
Logos, icons, diagrams, charts, fonts, flat illustrations, anything printed large. Rule: if the image consists of shapes and lines — it belongs in vector.
Photos, screenshots, complex textures, paintings — anything with smooth photographic transitions. Rule: if a camera shot it or a brush painted it — it's raster, and it doesn't need a vector.
The border case is rich illustrations with gradients and textures. They can technically be built in vector, but the file balloons past the raster equivalent. Choose by purpose: print at many sizes — vector; screen display — raster.
How to tell what you're looking at
- By extension: .svg, .ai, .eps — vector; .jpg, .png, .webp, .gif — raster.
- By zooming: open the file at 800%. Edges still perfect — vector. Little squares appeared — raster.
- The tricky case: a vector file can contain an embedded raster image. It's technically .svg or .eps but behaves like raster. Open the SVG in a text editor: a real vector is made of
<path>,<circle>,<rect>tags; one big<image>tag means you've been fooled.
The numbers: anatomy of two files
To make the difference concrete, here's the same check‑in‑circle mark in both formats.
Vector (SVG): the file is literally text:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#21A038"/>
<path d="M30 52 L45 66 L72 38" stroke="#fff" stroke-width="8" fill="none"/>
</svg>Three lines, ~200 bytes. Opens in a text editor, the color changes by editing six characters, renders at any size.
Raster (PNG 500×500): 250,000 pixels, up to 4 bytes each (RGBA) — up to a megabyte raw, ~10–30 KB compressed. No structure inside: there is no "circle" or "check", only dots. To change the color you'd repaint every green dot while tiptoeing around the anti‑aliased edges.
A 50–100× weight difference, and a categorical editability difference. This is why designers insist on "the vector, not a picture": for them it's the gap between "fixed in a minute" and "redrawn in a day".
The in‑between cases worth knowing
- PDF is a container: it can hold vector, raster or both. A PDF from Illustrator is vector; a scanned contract in PDF is raster in a wrapper.
- SVG with embedded raster — formally vector, actually a picture in an envelope (an
<image>tag inside). It won't scale losslessly, which is what makes it treacherous. - Fonts are vector: every letter is described by curves. That's why text in PDFs and on websites is crisp at any zoom — until someone pastes it as a screenshot.
- Icon fonts (Font Awesome etc.) — vector icons packed into a font, gradually giving way to plain SVG sprites.
- Canvas and WebGL in the browser are raster technologies: canvas drawings blur on zoom like any image.
Why "logo in vector" is not designer whim
A logo lives for decades and appears everywhere: a 40-pixel avatar, a site header, a banner, a storefront sign, a vehicle wrap. The only way to guarantee quality at every size is to store the logo as an instruction, not a mosaic. Raster versions generate from a vector in seconds; recovering a vector from a raster is a paid manual redraw.
A mini‑glossary for speaking the designer's language
- Curves (paths) — the lines vectors are made of. "Convert to curves/outlines" = turn text into shapes so fonts stop mattering.
- Nodes (anchors) — the points curves pass through. Fewer nodes for the same shape — a cleaner file.
- Tracing — automatic raster‑to‑vector conversion. Works on simple marks, ruins complex ones — see the vectorization article for details.
- Rasterization — the reverse: turning vector into pixels. Happens every time an SVG hits a screen and on every PNG export.
- DPI/PPI — dot density in print/on screen. A raster property; vectors don't have one — they rasterize to the needed density at output time.
- Retina (HiDPI) — screens with 2–3× pixel density, the reason raster images need a 2x size margin.
Ten minutes with this glossary and conversations with designers and print shops stop feeling like a foreign language.
In short
Raster is dots, vector is instructions. Photos are raster, logos are vector, and conversion only flows easily one way: vector to raster. Keep masters in vector, generate raster as needed.
Our logo catalog is built on exactly this principle: every brand is stored as an original SVG, and a PNG of any size is generated at download time.