> Markdown version of [/videos/100299-can-svg-be-fast-rendering-a-scatter-chart-with-over-10k-points?t=55](https://www.wearedevelopers.com/videos/100299-can-svg-be-fast-rendering-a-scatter-chart-with-over-10k-points?t=55). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Can SVG be fast? Rendering a scatter chart with over 10k points

You don't need canvas to fix sluggish charts. Batching 10k data points into a single SVG path drastically reduces DOM bloat and triples rendering speeds.

- **Speakers:** [Bernardo Belchior](https://www.wearedevelopers.com/@bernardo-belchior)
- **Event:** World Congress 2026 Europe
- **Published:** July 10, 2026
- **Duration:** 7:42
- **URL:** https://www.wearedevelopers.com/videos/100299-can-svg-be-fast-rendering-a-scatter-chart-with-over-10k-points

## Summary

When rendering scatter charts with upwards of 10,000 data points, standard SVG implementations suffer severe bottlenecks. Profiling the initial React render cycle reveals that creating and applying attributes to thousands of individual DOM elements consumes prohibitive amounts of browser processing time, leading to sluggish updates and lagging interactive states. While migrating to an HTML5 `<canvas>` element resolves the raw node count issue, it sacrifices the standard CSS styling properties—such as fill, stroke, and opacity—that component libraries like Material UI and Base UI rely on.

To bypass DOM bloat without abandoning standard styling paradigms, rendering engines can utilize a batched SVG approach. This technique consolidates thousands of individual graph markers into a single coordinated SVG `<path>`. By batching the markers, the DOM element footprint shrinks drastically while retaining necessary CSS component hooks. For the MUI X Charts ecosystem, this architecture successfully slashed initial render times by a factor of three—dropping execution from 410ms to 150ms under heavy CPU throttling.

However, condensing graph points into a single path introduces complex user interaction trade-offs. Because individual DOM nodes no longer exist, native click listeners fail; recreating precise user interactions requires building a custom spatial index that maps specific pixel coordinates back to individual data items. Furthermore, performant visual updates—like highlighting a hovered marker while slightly dimming background points—demand rendering localized, opaque replica layers rather than forcing re-renders of the massive parent path. Balancing these structural trade-offs against raw performance gains underscores the importance of thorough documentation and state management when scaling front-end visualizations.

**Keywords:** SVG performance optimization, MUI X data visualization, DOM node element bloat, React render cycle profiling, batched SVG path techniques, HTML5 canvas styling trade-offs, spatial indexing for chart interactivity, large dataset scatter plotting, CSS configurable charts, frontend UI scaling challenges, hover state replica workarounds

## Chapters

1. **Exploring the Material UI and Base UI ecosystem** (00:00) — Recent updates to underlying UI libraries set the context for exploring new charting component capabilities.
1. **Identifying performance bottlenecks in large data scatter charts** (00:55) — Rendering tens of thousands of data points reveals significant lag due to individual SVG circles.
1. **Profiling React render cycles and DOM creation bottlenecks** (02:16) — Analyzing massive marker payloads reveals that DOM element generation severely outpaces framework scripting operations.
1. **Evaluating canvas rendering tradeoffs against SVG styling features** (03:32) — Resorting to canvas drawings accelerates rendering speeds but fundamentally sacrifices critical CSS styling pipelines.
1. **Decreasing visual render time by batching SVG paths** (04:27) — Consolidating individual markers into single batched SVG paths drastically decreases DOM nodes while maintaining standard styling.
1. **Managing interactivity tradeoffs primarily through robust spatial indexing** (05:46) — Retaining interactivity on batched elements requires custom spatial indices and layered element replicas for cursor states.

## Related Moments

- [Migrating core design tools from SVG to HTML canvas](https://www.wearedevelopers.com/videos/1353-rendering-design-software-in-the-browser-at-penpot) (from "Rendering Design Software in the Browser at Penpot")
- [Integrating visual elements using SVG and HTML canvas](https://www.wearedevelopers.com/videos/84-web-based-information-visualization) (from "Web-based Information Visualization")
- [Evaluating performance impacts of advanced CSS animations](https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg) (from "NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg")
- [Rendering high-performance data visualizations in web browsers](https://www.wearedevelopers.com/videos/1794-wearedevelopers-live-from-javascript-to-webassembly-high-performance-charting-and-more) (from "WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More")
- [Performance considerations when rendering long lists natively](https://www.wearedevelopers.com/videos/203-a-journey-of-a-long-list-in-react) (from "A journey of a long list in React")
- [Resolving overplotting and color saturation issues in dense visualizations](https://www.wearedevelopers.com/videos/113-python-data-visualization-deepnote-w-pyviz-overview) (from "Python Data Visualization @ Deepnote (w/ PyViz overview)")

## Related Articles

- [The Fastest JavaScript Charts - Built for React and Beyond](https://www.wearedevelopers.com/magazine/636-the-fastest-javascript-charts-built-for-react-and-beyond)
- [The Overflow: 5 Tools for Working with SVGs](https://www.wearedevelopers.com/magazine/707-the-overflow-5-tools-for-working-with-svgs)
- [Top 7 JavaScript Charting Libraries](https://www.wearedevelopers.com/magazine/247-top-7-javascript-charting-libraries)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**