Hacker News new | past | comments | ask | show | jobs | submit login

We attempted to do a complex animation in SVG and the primary complaint was that it killed the browser in terms of CPU and memory usage. Are we doing something wrong?

I had the same experience using SVG to render music notation. We hit a performance issue - high CPU usage, skips/stutters - with several hundred to a thousand nodes, some animated. Switching to canvas increased that limit, in that we were able to keep smooth rendering with larger documents.

Did you render a whole document as one SVG, or do tricks like one SVG per line or sheet?

The whole score was rendered as one SVG element, until we hit the performance limit. Now we're rendering each row of measures (a stack of staves) as a canvas element, and it performs much better for our purposes.

lots of svg elements animated in conjunction will surely have a negative performance impact. At work we created a mind mapping tool, in where every node has events (drag, click, raggin, dragend, contextmenu, etc). After 200+ nodes the performance hit was very high. We had to stop redrawing the whole graph after every interaction. What a bummer.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact