SVG vs Canvas for large-scale rendering

Interview explanation:

• This is a trade-off question, not a one-word answer.

• Interviewers look for a decision framework: element count, redraw frequency, interaction model, and accessibility needs.

• SVG is DOM-based and ideal for a smaller number of highly interactive, accessible vector elements.

• Canvas is immediate-mode pixel rendering and often performs better for very large numbers of objects.

• SVG pros: CSS styling, built-in DOM events per element, easier accessibility semantics.

• SVG cons: thousands of nodes can become expensive (layout/paint/memory).

• Canvas pros: efficient bulk drawing, lower DOM overhead for dense scenes.

• Canvas cons: manual hit-testing, more custom code for interactions and accessibility.

• Rule of thumb: choose SVG for rich per-element interaction; choose Canvas for massive datasets or frequent redraw-heavy visualizations.

Usage examples:

• Use SVG for a workflow editor with selectable nodes/edges and keyboard focus.
• Use Canvas for a heatmap/chart with 50k+ points and frequent redraws.
• Use hybrid: canvas for heavy rendering + SVG/HTML overlay for tooltips/selection.

Common interviewer follow-ups:

• Q: Hybrid strategy?
• A: Render dense primitives on canvas and layer SVG/HTML for hit targets and tooltips.
• Q: Accessibility plan for canvas-heavy UIs?
• A: Provide semantic mirrors, keyboard navigation paths, and ARIA announcements.
• Q: How to validate the choice?
• A: Profile FPS, frame time, memory, and input latency with realistic datasets.