Image vs VectorImage for SVG. What to use?
-
Hello all!
What is better to use with SVG? VectorImage? Or just Image?
Both is working on devices (iOS/Android) and MacOS, but on Android simulator started showing black square instead of rendered Image with SVG source (after update on MacOS Sequoia). On physical Android device all is Ok, both equal (VectorImage and Image).
-
The black square were because conflict of macOS Sequoia (Apple Silicon) hardware acceleration in the Android emulator with Qt's RHI (Rendering Hardware Interface). Changing settings in Android emulator solved black square problem.
Open your AVD Manager in Android Studio, edit your Virtual Device, and change the Graphics setting from Automatic/Hardware to Software
-
Vector-based formats are usually superior to pixel-based formats. SVG is a vector format, so it is generally preferable to use a vector image. This allows the image to scale properly to different screen sizes.
-
Unfortunately, one is not decisively better than the other, or we would not have included both. It depends on the use case you have in mind. If the target size of the image is known at build time, then I would usually recommend converting it to a PNG as part of the build process and showing it with an Image component. Drawing a prerasterized image is as fast as it gets.
If your application is running on multiple form factors and therefore needs to be able to render the image at arbitrary sizes, this approach becomes impratical. But if the target size is selected at startup of the application and stays the same for its duration, then including the SVG file and rendering it with an Image will likely be best. There is a cost to rasterize the SVG the first time it is loaded, but otherwise this performs the same as rendering a PNG.
If you need to transform the image while the application is running (for instance doing animated zooms like in the Weather Forecast example: https://doc.qt.io/qt-6/qtquick-quickshapes-weatherforecast-example.html) then the best option currently is VectorImage. The same goes if the SVG is animated.
As an additional point: If the SVGs are rasterized at very large sizes, then VectorImage will typically be more conservative of memory. So it can also depend on which resource you want to conserve.
Some notes about this from the documentation: https://doc.qt.io/qt-6/topics-graphics2d.html#prerasterized-vector-images
-
I agree that for fixed sizes PNG is the better format. However, for mobile devices in a lot of cases the size is not fixed. Maybe I have assumed too much 😉. Even on desktop we tend to use SVG for icons because of display scaling (though as far as I know if you have a dedicated designer he should design PNGs for different resolutions instead).
