Vector vs. Raster: The fundamental difference

Every image on your computer falls into one of two categories: vector or raster. Understanding how they work under the hood is the key to exporting crisp, professional assets.

Vector (SVG, PDF)

Math-based geometry

Raster (PNG, WebP)

Pixel-based grid

How Vectors Work (Math & Coordinates)

Vector graphics don't store pixels. Instead, they store formulas. An SVG file is essentially a text document containing mathematical coordinates, curves (Bézier curves), fills, and strokes.

When your monitor displays a vector, the software reads the math and draws the shape perfectly relative to the size of your screen. This is why you can scale an SVG from a 16px icon to a billboard without losing any quality or increasing the file size.

Common formats: SVG, EPS, AI, PDF (partially).
Best for: Logos, icons, typography, flat illustrations, blueprints, CAD drawings.
Pros: Infinite scalability, tiny file sizes for simple shapes, editable in text editors (SVG).
Cons: Cannot render complex photographic data or organic textures efficiently.

How Rasters Work (The Pixel Grid)

Raster images (also called bitmaps) are giant arrays of tiny colored squares called pixels. A 1000x1000 pixel image contains exactly one million pixels, and the file must store color information for every single one of them (which is why compression codecs like WebP and AVIF are so important).

Because they are fixed to a grid, scaling a raster image up forces the computer to guess what colors the new, larger pixels should be. This "interpolation" results in blurry, pixelated, or artifact-heavy edges.

Common formats: PNG, JPG, WebP, AVIF, JXL, GIF.
Best for: Photography, digital painting, complex shadows, images with millions of colors.
Pros: Captures photorealistic detail, universally supported across all apps, OSs, and older hardware.
Cons: Loses quality when scaled up, file sizes grow exponentially with dimensions.

The False Vector

Just because a file is saved as `.svg` or `.eps` doesn't mean it's actually vector. You can easily embed a base64-encoded raster image inside an SVG file. It will act like a vector container, but the image inside will still pixelate when scaled.

Why do we convert Vector to Raster?

If vectors are infinitely scalable and smaller, why do we ever convert an SVG to a PNG or WebP?

Social Media & Open Graph: Twitter, Facebook, LinkedIn, Slack, and Discord cannot read SVGs for link previews (`og:image`). They require JPG, PNG, or WebP.
Legacy software: Many older document editors, email clients, and CMS platforms block SVG uploads for security reasons (since SVGs can contain executable JavaScript).
Performance with complex math: An SVG with 50,000 anchor points, massive node counts, or intense CSS filters (like `feGaussianBlur`) can actually freeze a browser. Rendering that SVG once and saving it as a raster WebP offloads the CPU cost.
Predictability: SVG text depends on the fonts installed on the viewer's device. Rasterizing ensures the typography is "baked in" and looks identical everywhere.

Use both with Progressive Enhancement

On the web, you can offer the crispness of a vector to modern browsers while falling back to a raster image for older devices or email clients using the <picture> element.

HTML

<picture>
  <!-- Modern browsers load the vector -->
  <source type="image/svg+xml" srcset="logo.svg">
  
  <!-- Legacy clients fall back to raster -->
  <img src="logo.png" alt="Company Logo" width="200" height="50">
</picture>