Can I stop stationary SVG images from using excesssive CPU resources in QML? - performance

Question

I have a QML GridView, with a huge number of simple icons in it. The number can be in the millions, but only around a thousand will be visible at the same time, and there are only a few dozen types of images, so I guess they should be cached well.
If I use PNG images, everything is fine. The startup time is relatively long, but after everything is rendered, the application runs fine even on low-spec machines, and scrolling / resizing / zooming in the GridView is also fast and smooth.
However, if I use SVG instead, it slows my system down significantly. Even after everything is rendered, the responsiveness of the application is horrible, even GUI elements unrelated to the GridView are showing significant lag, the mouse cursor can barely be moved, etc. I thought after they are rendered, SVGs are presented just as any other image. Why must the CPU be busy if I don't even interact with them? And, most importantly, is there anything I can do about it? The same thing happens if I have SVG images containing nothing but a single rectangle, and use the same image in every cell. So it must mean the objects themselves are doing something.

Answer 1

"The number can be in the millions" and *"The startup time is relatively long"- those statement warrant a discussion about the design of your data model and bitmap caching strategy. But you didn't provide any code. So the following is a guess.
I'm not sure if you are loading the SVG images in C++ code or through QML, but I suspect you aren't setting the sourceSize (width and height) properties when you import your SVG. Hence, it's getting mapped into memory at a much larger size than it's getting rendered at. That is, it's eating up a lot more memory than it was with pre-sized PNG files. Or perhaps it's getting mapped in at a smaller size and Qt is is spending a lot of time having to resize these images at runtime as it scrolls in/out of view.
Open up one of your SVG files with notepad and look at at the attribute to see what the import size is.
In any case, try making sure your sourceSize.width and sourceSize.height match your render width/height.
Image {
id: icon
anchors.centerIn: parent
source: "cloud.svg"
sourceSize.width: 50
sourceSize.height: 50
width: 50
height: 50
}

Answer 2

Loading SVG's is an expensive operation...
Gridview manage dynamic objects.. creating visible items and destroying invisible items each time ....so, must render SVG each time you move the grid
One very bad idea is use that:
GridVIew{
cacheBuffer : 6000
//create 6000 items ...long startup time and memory expensive
...
}
This is a much better option:
Image {
id: icon
asynchronous : true //load image in asyncronus thread
sourceSize.width: width //scale as item size
sourceSize.height: height //scale as item size
...
}
If the load is too slow, you can add something like "LOADING..." text in the item background...