Home | Tutorial Home | Module 09

SVG vs Canvas: Stress Test

Both panels render the same random scatter plot data. The left panel uses <canvas> (immediate mode), the right uses <svg> with individual <circle> elements (retained mode). Drag the slider to increase the point count and watch the FPS counters diverge.

Points: 100

Performance warning: Setting the slider to 50,000 points may cause the SVG panel to freeze your browser tab on slower machines. The Canvas panel should remain responsive. If your tab becomes unresponsive, wait a few seconds or close and reopen it.

Canvas 2D (Immediate Mode) -- FPS

SVG (Retained Mode) -- FPS

What to Observe

Point Count	Canvas Behavior	SVG Behavior
100	60 FPS — effortless	60 FPS — effortless
1,000	60 FPS — no change	~55–60 FPS — slight overhead
5,000	60 FPS — still fine	~20–40 FPS — visible stutter
10,000	~55–60 FPS	~5–15 FPS — sluggish
50,000	~30–50 FPS	<1 FPS — frozen

The exact numbers depend on your hardware, but the relative behavior is consistent: Canvas degrades gracefully while SVG hits a wall around 5,000–10,000 elements.

Why does this happen? Canvas redraws all points in a single pass through the pixel buffer — the cost scales with pixels drawn, not with object count. SVG creates a DOM node for each circle, and every animation frame requires the browser to traverse the entire DOM tree for style resolution, layout, and painting. The DOM traversal cost is O(n), and at 50,000 nodes the constant factor becomes dominant.