Results 1 to 5 of 5

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

  1. #1
    Join Date
    Feb 2015
    Location
    Poland
    Posts
    34
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

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

    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...

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

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

    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.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  3. #3
    Join Date
    May 2018
    Posts
    2
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows

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

    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.

  4. #4
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

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

    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.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  5. #5
    Join Date
    Mar 2009
    Location
    Brisbane, Australia
    Posts
    7,729
    Thanks
    13
    Thanked 1,610 Times in 1,537 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows
    Wiki edits
    17

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

    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.

Similar Threads

  1. Replies: 1
    Last Post: 7th March 2013, 01:30
  2. Replies: 1
    Last Post: 1st March 2013, 12:55
  3. Replies: 3
    Last Post: 1st April 2011, 14:09
  4. How to show images from database as icons in QListView
    By LeshaS in forum Qt Programming
    Replies: 2
    Last Post: 21st January 2011, 08:13
  5. Images/icons. It's not displayed
    By LMZ in forum Qt Tools
    Replies: 37
    Last Post: 18th May 2007, 15:55

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.