Why they use png images/icons instead svg in examples?!?

[Szyk]

I study "Qt Quick Controls 2 - Gallery" example from Qt examples and they use many the same png images with different resolutions.
I am wonder why they don't use svg graphics as they are intend for such cases when resolution can't be determined in advance?!?
It seems silly as hell! And drawback entirely...

[d_stranz]

I can think of two reasons: First, if the icons are indeed bitmaps, then a bitmap in PNG format is also going to be an embedded bitmap (<image>) in SVG, so it makes no difference and is easier to just use a set of PNG files at different resolutions. Second, support for PNG is built in to the Qt5Gui library, whereas SVG support requires an additional library (Qt5Svg). The purpose of examples is to teach, so simpler is better.

[Pixelgrease]

I use SVG images almost exclusively in my apps, but there are downsides to SVGs:


PNGs are easier to create. Everyone and their dog has written something to edit bitmaps. SVG image editors are way harder to build -- there aren't many good ones. I use InkScape because it produces compatible SVGs.
SVG compatibility is not good. For example, Qt doesn't support drop shadows in SVGs. There is a way to do it through masks, but it is not easy... as opposed to PNGs.
SVGs are tricky to use; you must set the sourceSize as well as the width & height.
SVGs draw more slowly when resized because they are complicated to parse. You can get around this by setting the sourceSize to larger than what you need. Then changing width & height is as fast as a PNG image.
SVGs have the promise of animation... but you can't use it in QML. You need to modify the xml content then re-render the SVG -- that's not supported out-of-the-box. You can use an animated GIF in QML... yet another bitmap format.


I use SVGs for precisely the reason you gave; my output resolution may change. I do embedded development and I scoff at PNG-based interfaces that may require reworking bitmaps to support a new resolution and then there's the time it takes to validate the whole UI; as opposed to an SVG-based UI that just works.

SVG has limitations but the benefits outweigh the costs for me.

[d_stranz]

I use SVG images almost exclusively in my apps, but there are downsides to SVGs:

...SVG compatibility is not good.

I too use SVG to define the splash screen and "help->about" image in my app, but use Inkscape to convert it to a PNG for the app. I tried using the SVG directly, but Qt doesn't have the compatibility needed to render it.

If you are using simple SVG, then it would probably work just fine for icons, at the cost of slower rendering and the need to deploy an extra library with your app. For more complex things, I think it is still better to use Inkscape to export the image to PNGs of various scales, and you choose the one that best matches the desired size at runtime.

[ChrisW67]

A range of independent PNG images has the advantage that each image can be differently tuned so that is remains recognizable.

An arbitrary SVG that looks good at 256x256 pixels may not be suitable if rendered at 24x24: detail is lost but you have no choice of which detail and cannot adjust other details to suit. You can work out an SVG that works at various sizes... Inkscape, for example, has the Icon Preview view so that you can see what you will get at various sizes as you edit the SVG.