SVG vs Canvas

Feature SVG Canvas
Type Vector (scalable) Bitmap (pixel-based)
DOM Each shape is a DOM element Single element, drawn via JS
Best for Icons, diagrams, interactive graphics Games, image processing, animations
Scalability Infinite, crisp at any size Fixed resolution (can scale via CSS, may blur)
Accessibility Can use <title>, <desc>, ARIA Requires separate text alternative
Performance Many elements = slow DOM Thousands of sprites = efficient

Choose SVG for logos, charts, and UI icons; choose Canvas for pixel manipulation, games, and dense visualizations.

Inline SVG 

  <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="svg-title">
    <title id="svg-title">Go button</title>
    <circle cx="50" cy="50" r="40" fill="#007bff" />
    <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Go</text>
</svg>

The viewBox defines the coordinate system — combine with width="100%" for responsive scaling.

Common SVG Elements 

  <rect x="10" y="10" width="80" height="40" rx="5" fill="green"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
<path d="M10 80 Q 50 10 90 80" fill="none" stroke="purple"/>
<polygon points="50,5 95,95 5,95" fill="orange"/>
<ellipse cx="50" cy="50" rx="40" ry="25" fill="yellow"/>

SVG as Icon System 

  <svg style="display:none" aria-hidden="true">
    <symbol id="icon-home" viewBox="0 0 24 24">
        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
    </symbol>
    <symbol id="icon-search" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
    </symbol>
</svg>

<svg width="24" height="24" role="img" aria-label="Home">
    <use href="#icon-home"/>
</svg>

Sprite sheets reduce HTTP requests. Tools: SVGO (optimize), Figma/Illustrator (export).

Styling SVG with CSS 

  .icon { fill: currentColor; width: 1.5rem; height: 1.5rem; }
.icon:hover { fill: #007bff; }

/* Animate SVG */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; transform-origin: center; }

Canvas Basics 

  <canvas id="myCanvas" width="400" height="300" role="img" aria-label="Blue rectangle and red circle"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#007bff';
ctx.fillRect(50, 50, 200, 100);

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();

ctx.font = '24px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello Canvas', 60, 110);
</script>

Always set width and height attributes (not just CSS) — CSS scaling doesn’t change pixel buffer resolution.

Canvas Animation 

  let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#007bff';
    ctx.fillRect(x, 100, 50, 50);
    x = (x + 2) % canvas.width;
    requestAnimationFrame(animate);
}
animate();

Use requestAnimationFrame for smooth 60fps animation synced to display refresh.

High-DPI (Retina) Canvas 

  const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = '400px';
canvas.style.height = '300px';
ctx.scale(dpr, dpr);

Without DPR scaling, canvas looks blurry on Retina displays.

Responsive SVG 

  <svg viewBox="0 0 100 100" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
    <!-- scales to container width, maintains aspect ratio -->
</svg>

Best Practices

  1. Optimize SVG — run through SVGO; remove editor metadata
  2. Accessible SVG — <title>, <desc>, or aria-label
  3. Canvas fallback — provide text description for screen readers
  4. Prefer CSS animations on SVG over JS when possible
  5. Offscreen canvas — use for heavy image processing without blocking UI

Troubleshooting

Canvas blurry on mobile

  • Apply device pixel ratio scaling (see above)

SVG not scaling

  • Set viewBox; remove fixed width/height or use percentages

Canvas animation stutters

  • Avoid heavy work in animation loop; use OffscreenCanvas + Worker for complex scenes

SVG colors wrong in dark mode

  • Use currentColor or CSS variables for theme-aware icons

SVG and Canvas are complementary — master both for complete browser graphics capability.