Basic Graphics Concepts

Raster vs Vector

Understand the fundamental difference between pixel grids and mathematical paths through this interactive demo.

Zoom Level: 1.0x
Drag slider to see details
Raster
Essence: Grid of Pixels
Vector
Essence: Mathematical Paths

Raster Technology

  • Principle:

    A grid of colored squares called "pixels". Each pixel holds specific color info (RGB). Quality depends directly on Resolution (DPI/PPI).

  • Color:

    Excellent at complex color gradients, shadows, and details. The only choice for photos and realistic paintings.

  • Formats:
    JPG PNG GIF TIFF WEBP

Vector Technology

  • Principle:

    Based on mathematical formulas (points, lines, curves). E.g., a circle is defined by center and radius `r`, not pixels. Thus, it scales infinitely without loss.

  • File:

    File size is usually very small (stores instructions only) and independent of dimensions. Not good for photorealistic images.

  • Formats:
    SVG AI EPS PDF
DimensionRasterVector
Resolution
Dependent
Independent
File Size
Large (at high res)
Small (for simple shapes)
Conversion
Hard to vectorize
Easy to rasterize
Best Use
Photos, Paintings
Logos, Icons, Type
Tip: Modern web design uses SVG for icons to ensure sharpness on Retina screens, and WebP/JPG for photo backgrounds.