4 ms·
(Edit moved to here from the wrong thread) This comes up on each SVG thread and I post the same comment each time (so excuse me if you've heard this from me be
by aidos 9y ago
(Edit moved to here from the wrong thread)
This comes up on each SVG thread and I post the same comment each time (so excuse me if you've heard this from me before).
We render SVG that contain beyond 100k nodes in the browser and find that it works fine. You need to be careful with your manipulations and we've developed a couple of tricks to keep things snappy, but the final experience is great.
Here's a demo of it in action with a smaller SVG
https://www.countfire.com/product-demo/ https://www.countfire.com/product-demo/
- vbuwivbiu 9y agothat's not 100k unique elements though, it's 100k instances of a set of <100 unique elements using <use> isn't it ?
- aidos 9y agoNo, in our case they're all unique elements - unfortunately for me! That demo example is actually much smaller though (2k nodes). Here's an example with over 150k nodes [1]. To be honest, we would normally doctor documents that had this many nodes to make the experience smoother for users. You'll notice that it's a bit sluggish when you zoom in and out, but panning is the same speed regardless of number of elements, and updating elements within the document is fast too. [1] https://www.dropbox.com/s/xf89s2txvp9jb3k/Big%20SVG%20%28150k%29.gif?dl=0 https://www.dropbox.com/s/xf89s2txvp9jb3k/Big%20SVG%20%28150...
- vbuwivbiu 9y agoperformance degrades to <10fps above 2k nodes (2k random circles in an svg) for me regardless of browser
- aidos 9y agoWhat are you doing with them? Animating them?
- vbuwivbiu 9y agonothing - only changing the transform matrix on the root <g> for pan/zoom
- aidos 9y agoCan you move it further up and are you using 3D?
- vbuwivbiu 9y agodo 3d css transforms make that much difference ?
- aidos 9y agoYou can use something like `transform:translateZ(0px)` to force a subsection of the dom to exist on its own rendering layer. Then you can transform the parent nodes and they'll move the lower layer around as if it were a static picture that they don't need to redraw. I'm not sure how well this works within an svg, but you can certainly use it to do your transformations outside the svg.
- vbuwivbiu 9y agook i dug out the project I was thinking of and I was wrong - performance is fine at 10k nodes. adding translateZ causes a slight delay after changing the transform matrix while it re-renders the bitmap, and you see the switch - thanks for the advice
- jordache 9y agoso with your 100k node ceiling. Have you tested across different OSs/CPUs/Browsers? Have you found tremendous variety in performance?
- aidos 9y agoThere's not a specific ceiling. This morning I did a quick test with 400k nodes and we sometimes get 2-3 million or more. We only use chrome because Firefox struggled in the initial testing. Having said that, I haven't tried in anything other than chrome in ages and I'd wager the situation has changed a lot in the last couple of years.
- jordache 9y agoOnly use Chrome? Your product only supports Chrome? That's one of the issue i have with SVG browser implementation varies so much. Our product that is performant in Chrome sucks in IE11
- aidos 9y agoYeah, for the moment we only support chrome. I know it's not ideal, but it sure is nice not having to worry about cross browser issues :-) What's the slow bit in IE? Is it the svgs?