Why do SVG Images lag when I change scale of only one of them?

I hope this is the correct section of the forum for this post.

There is a panel with 63 buttons in my game. Each button corresponds to a weapon and has its icon. When cursor hovers over a button, its icon increases in size (scale changes to 1.1). Raster icons without mipmaps are pixelated, and with them they are blurry, so I replaced them with vector ones. I solved the antialiasing problem setting the canvas to Screen Space - Camera. But now I've encountered a problem.

Every time I change scale of an icon, I get a massive green spike in the profiler. This spike is caused by PostLateUpdate.PlayerUpdateCanvases - ... - ScheduleGeometryJobs - 184 ms for 14 objects. For 63 objects, it's 660 ms. And also the PutAllGeometryJobFence - ... - WaitForJobGroupID method takes much time in addition to that. It's proportional to number of SVG Images I have, but I modify only one.

Also there's a smaller purple spike caused by Canvas.SendWillRenderCanvases - Layout when I change an icon's color - 49 ms.

There are no layout components or something on the scene - only buttons. SVG Images don't catch raycasts - regular images do, and I don't scale them.

Should I report a bug or I'm just doing something wrong?

 

Unfortunately I do not know much about the SVG features. Are you using layout groups? When you change the scale you could be causing your layout to be dirty and re-layout your buttons. Usually its best to sub-divide your UI into additional canvases in order to prevent it from causing your entire UI to be redrawn. Try disabling your layout groups if you have them to see if that's the cause.

 

As I said, there are no layout groups. However, separate canvases for icons do work. Thank you for useful advice.

 

Interesting! Apologies, I did not catch that you said you weren't using layout components. But since canvases helped it does sound like something was being moved or scaled, causing expensive rebuilds. Glad I could help!