Last time I said I’d build something simple—a scatter plot with a few thousand points. Just to feel the difference between SVG and canvas in my fingers.
So I did.
And of course, “simple” turned into “why is my fan spinning so loud” pretty quickly.
The Setup
I made two versions. Same data, same visual. One SVG, one canvas. A thousand random points at first, then ten thousand, then fifty thousand—because I clearly enjoy watching browsers suffer.
If you’ve ever wondered where the line is between “SVG is fine” and “your tab is now a jet engine,” here’s what I found.
SVG
Up to about 500–800 points, everything is smooth. DOM inspector is happy, hover effects work out of the box, tooltips just work. It’s almost too easy.
At 3,000 points, the DOM starts to feel heavy. Inspecting elements becomes sluggish. Mouse interactions still work, but you can feel the browser working harder.
At 10,000 points, scrolling is a slideshow. The browser’s layout engine is basically crying. If you try to attach individual click handlers to each circle, your computer will politely ask you to reconsider your life choices.
Canvas
At 1,000 points, I couldn’t tell the difference. At 10,000 points, still smooth. At 50,000 points, it started to breathe a little heavier, but it was still usable.
The trade-off? Nothing is an element. No built-in hover, no automatic tooltips, no inspector magic. You’re in charge of everything: hit detection, redrawing on zoom, making sure the right thing highlights when someone hovers. It’s not harder, it’s just… more.
The Weird Place In Between
What surprised me was how nice it felt to combine them. Background grid and axes in SVG (sharp, scalable, zero redraw hassle). Data points in canvas (fast, even when there are thousands of them). Then a separate canvas for hover interactions, or an absolutely positioned SVG for tooltips.
It sounds over-engineered, but honestly it was the most pleasant to work with. Each layer did what it’s good at. SVG handled the static stuff. Canvas handled the chaotic swarm of dots. My sanity stayed mostly intact.
AI Wrote None of This (But It Tried)
I’m still using AI tools every day—they’re great for generating the first draft of a chart component or remembering canvas API syntax I keep forgetting. But when I asked an AI to “optimize this scatter plot for 10,000 points,” it gave me code that technically worked but had zero understanding of the actual constraints.
It didn’t know that my users would be on 13-inch laptops with integrated graphics. It didn’t know I needed accessible labels for screen readers. It didn’t know I wanted smooth zooming without tearing my hair out.
AI gave me code. I still had to make the decisions.
That’s the part that doesn’t come from a prompt. It comes from building things, watching them break, and figuring out why.
What’s Next
I’m still messing with this scatter plot thing. Next I want to add zoom and pan, because that’s where canvas really gets interesting (and frustrating). Probably going to write a small library of my own—not to publish, just to see where the abstraction leaks.
If you’ve ever tried to render thousands of things on the web, I’d honestly love to know: what broke for you? Did you start with SVG and regret it? Or did you jump straight to canvas and miss having real elements?
Reply, comment, yell into the void—I’ll probably read it.
This stuff is still weird and messy and I’m glad we’re figuring it out together.
Top comments (0)