0

We've got a very complex SVG UI. It allows the user to load images on the SVG (every element added is a rect with a fill that is an image). The user can then drag and manipulate these elements on the SVG.

Once we got several elements added on the canvas and the user tries to drag we see a tremendous drop in FPS. You can see in the linked image of the timeline the green spikes are the browser render pipeline (paint/composite).

The question I can't seem to find anything on is if there's a way to force an SVG element to be it's own rendering layer (like you can do with CSS and HTML nodes). When I look at layer borders in Chrome the entire SVG element is one layer.

We are using 2d Matrix transforms on everything.

Any ideas or input?

https://i.stack.imgur.com/XQkNQ.jpg

Fernker
  • 2,238
  • 20
  • 31
  • have you thought about rasterizing `onMouseDown()` and then removing the raster `onMouseUp()`? See this question: http://stackoverflow.com/questions/23884074/cad-in-a-browser-html5-canvas-and-performance-limitations-of-javascript-browser – nicholaswmin Dec 09 '16 at 17:22
  • If I understand correctly we might kind of be doing this. We are using SVG but not with actual paths. Everything is a node with a fill that is a raster image (with transparencies). So there's no actual path data in the client (this is done to hide path data from the client for legal reasons). – Fernker Dec 09 '16 at 17:32
  • how many elements do you have on your screen? – nicholaswmin Dec 09 '16 at 17:35
  • going the extra mile on the above proposal - on `mouseDown`, group together *all unselected* elements and rasterize the whole group (and hide the rects so they don't clog the rendering pipeline) - would be a bit more tricky to code but it should give you a huge performance boost – nicholaswmin Dec 09 '16 at 17:37
  • Interesting idea, thanks. Any other ideas of how to maybe get SVG elements onto their own render layer? – Fernker Dec 09 '16 at 17:54
  • Nothing comes to mind right now :) – nicholaswmin Dec 09 '16 at 17:57
  • browsers put things in rendering layers using their own internal algorithms which are hard to game because if we had some kind of obvious rendering-layer attribute or mechanism everyone would cargo cult it into uselessness. Been there, done that. – Robert Longson Dec 09 '16 at 22:17
  • We were able to solve the issue by moving out of SVGs completely. We could still use the same transforms up in HTML/CSS and we were then able to take better control of GPU rendering and performance. We went from around 7 fps on moving certain items to 60 fps! – Fernker Feb 13 '17 at 22:24

0 Answers0