Short answer
A vector image describes shapes and other elements through geometric instructions; a raster image records a grid of colored pixels. The distinction concerns how the image is represented, not simply what it depicts: a project can combine both. Vector geometry scales without the pixelation associated with enlarging a fixed raster grid. 1 2
On this page
At a glance
Scroll to compare all columns →
| Attribute | Vector image | Raster image |
|---|---|---|
| Basic representation | Geometric instructions and objects | Rows and columns of pixels |
| Enlargement | Geometry remains crisp | Pixels may become visible |
| Common creative examples | Logos, charts, line art | Photographs |
| Source examples | SVG | PNG, JPEG, GIF |
These are representation differences and common uses, not restrictions on subject matter. 1 2
What each thing is
A vector description records elements such as curves, borders, and fills. W3C also emphasizes that its parts are discrete objects. A raster description records the image through individual colored pixels. Thus, the boundary separates an object-and-instruction model from a pixel-grid model, rather than separating drawings from photographs absolutely. 1 2
Key differences
Scaling is the clearest consequence: vector geometry can be recalculated at a new size, whereas enlarging raster content can reveal its existing pixels. File size is less decisive. W3C says vectors can often be smaller than equivalent raster images; that qualified tendency is not a reliable classification test. 1 2
How to tell them apart
Enlarge the image: visible blocks or pixelation suggest raster content. Treat this as a clue, not proof that the whole document is raster. Then ask whether the relevant element is represented by shapes and drawing instructions or by pixels; the sources distinguish representations and also describe mixed projects. 1 2
Where they overlap
Both represent visual content, and they can contribute to the same publication. Software categories are not exclusive boundaries either: Adobe describes Photoshop as raster-based but able to handle vector files, and Illustrator as vector-based but able to open raster images. The application’s name alone does not settle the content’s representation. 1
Edge cases
Web drawing separates the method from the result. W3C says both SVG and Canvas offer vector drawing APIs, but SVG retains a scene graph while Canvas produces pixel-based output without retaining the drawing instructions. Canvas scaling requires running the drawing scripts again to avoid distortion; a vector-style drawing method does not guarantee a vector result. 2
Why the distinction exists
The terms identify different ways to encode visual information, with consequences for scaling and manipulating image parts. In creative publishing, Adobe emphasizes geometry and photographic detail; in Web graphics, W3C additionally emphasizes retained objects and interactivity. These are complementary disciplinary emphases, not separate definitions. 1 2
Common misconceptions
“Made in a vector editor” does not mean every image involved is vector. Nor does conversion merely relabel existing pixels: Adobe’s JPEG-to-vector example uses tracing to generate vector content. Finally, calling a project vector or raster can conceal its combination of a geometric logo and pixel-based photography. 1
Examples
First, Adobe’s brochure example pairs a vector company logo with raster photographs: classify the components separately rather than forcing one label onto the publication. Second, hypothetically, a chart drawn with Canvas commands has a pixel-based final result, while an SVG chart retains vector structure. Similar-looking charts can therefore have different representations. 1 2