Design Atlas
한국어
✎ Graphic, brand & print

Vector vs. raster

벡터 vs 래스터

Vector shapes are drawn from math and stay crisp at any size; raster images are a fixed pixel grid that blurs or blocks up when enlarged — this is why logos are always archived as vectors.

Also known as: Vector graphics vs bitmapSVG vs raster
···
html
<div class="cmp">
  <div class="pane">
    <svg viewBox="0 0 40 40"><polygon points="20,4 36,32 4,32" fill="var(--accent)"/></svg>
    <span>SVG</span>
  </div>
  <div class="pane">
    <canvas id="ras" width="10" height="10"></canvas>
    <span>PNG 10×10</span>
  </div>
</div>
css
.cmp{display:flex;gap:6%;width:min(92%,320px)}
.pane{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.pane svg,.pane canvas{width:62%;aspect-ratio:1;animation:zoom 4s ease-in-out infinite}
#ras{image-rendering:pixelated}
.pane span{font-size:10px;letter-spacing:.05em;color:var(--muted)}
@keyframes zoom{0%,100%{transform:scale(1)}50%{transform:scale(2.3)}}
js
const c = document.getElementById('ras');
const ctx = c.getContext('2d');
const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
ctx.fillStyle = accent || '#5b5bf7';
ctx.beginPath();
ctx.moveTo(5, 1);
ctx.lineTo(9, 8);
ctx.lineTo(1, 8);
ctx.closePath();
ctx.fill();

Vector graphics store the coordinates of points and curves as math. Zoom in as far as you like and the shape gets recalculated and redrawn every time, so the outline always stays crisp. A raster (bitmap) image is the opposite — a fixed grid of pixels with color already baked in — so enlarging it past its original size just stretches each pixel, and the steps become visible.

That's why a logo's master file should always be a vector format (SVG, AI, EPS): the same file scales down to a business card and up to a building-sized banner without any loss. Photographs, on the other hand, are essentially impossible to describe as vectors given their color and texture complexity, so they stay raster (JPG, PNG).

A common mistake in practice is someone downloading a logo as a PNG from a website and treating it as the master file. Scale that PNG up again and it develops blur and blockiness that would never have happened starting from a vector. Whenever a logo is handed off, the source vector file should always be identified alongside it.

When to use

Always keep the master file as a vector for anything — like a logo or icon — that will be reused at many sizes. Photographs, with their complex color and texture, belong in raster.