벡터 vs 래스터

<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>

.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)}}

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();