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.devicePixelRatiofor 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
| Feature | HTML5 Canvas | SVG |
|---|---|---|
| Type | Raster / Bitmap | Vector |
| Rendering Paradigm | Immediate mode (pixel-based) | Retained mode (DOM/XML tree) |
| Resolution Independence | No (blurs when scaled unless redrawn) | Yes (infinitely scalable) |
| DOM Tree Overhead | None (1 <canvas> element) |
1 DOM node per visual element |
| Event Handling | Manual coordinate calculation | Standard DOM event listeners (onclick, etc.) |
| CSS Styling | No (styled via JS drawing APIs) | Yes (CSS classes, :hover, animations) |
| Text & Accessibility | Poor (text is drawn as pixels) | Good (searchable, selectable text nodes) |
| Best For | Fast action games, particle engines, real-time pixel filters | Icons, UI components, responsive charts (D3.js), infographics |