Canvas vs SVG

Both HTML5 <canvas> and Scalable Vector Graphics (<svg>) are standard web technologies for rendering rich 2D graphics in browsers, but they operate on fundamentally different paradigms.

Core Architectural Differences

1. Rendering Model: Immediate Mode vs. Retained Mode

• <canvas> (Immediate Mode / Raster): Draws pixels directly to a bitmap surface via JavaScript (2D Context or WebGL). Once drawn, the browser forgets what objects were painted—it only retains pixel data. To animate, you must clear and redraw frames in a render loop.
• <svg> (Retained Mode / Vector): Describes graphics using XML markup. Every element (<circle>, <path>, <rect>) is a real DOM node maintained in memory by the browser, preserving its vector geometry.

2. Resolution & Scalability

• <canvas>: Resolution-dependent. Scaling a canvas can cause pixelation and blurriness unless you manually re-render at higher pixel ratios (e.g. window.devicePixelRatio for Retina displays).
• <svg>: Resolution-independent. Vectors are defined mathematically, scaling infinitely crisp at any resolution or zoom level without distortion.

3. Event Handling & Interactivity

• <canvas>: No built-in DOM events for individual shapes. If a user clicks on a drawn circle, you must calculate coordinates manually (hit-testing / raycasting or using helper libraries like Pixi.js / Fabric.js).
• <svg>: Native DOM event listeners work out of the box (element.addEventListener('click', ...)), and elements can be styled with CSS pseudo-classes (:hover, transitions, animations).

4. Performance Trade-Offs

The performance profile depends on object count vs. screen resolution:

• Canvas excels when:
  • Rendering thousands of moving objects simultaneously (e.g., particle systems, 2D/3D physics games, heatmaps).
  • Direct pixel manipulation is required (filters, ray tracing, video frame processing).
• SVG excels when:
  • Rendering complex user interfaces, charts, and diagrams with a moderate number of objects (< 1,000 nodes).
  • Deep interaction, accessibility, and text selection are required.

High Object Count (> 5,000) ────► Canvas (No DOM overhead)
High Screen Size / Zooming  ────► SVG (Vector math, no massive bitmap buffers)

Comparison Summary