[Interest] How to render small Images decently on non retina displays with QtQuick?

[Shawn Rutledge]

> On 15 Mar 2018, at 14:20, Shantanu Tushar <shaan7in at gmail.com> wrote:
> 
> On 6 March 2018 at 22:15, Xavier Bigand <flamaros.xavier at gmail.com> wrote:
> Hi,
> 
> If your sample picture is relevant I can suggest you to convert it as SVG (vectoring it) or using distance field technique.
> 
> I had this question for a while now - if we can use SVGs for showing application icons (which will then look good with any dimensions / DPI), why is it common to use images instead? There's obviously some benefit to images as people take pains to bundle multiple versions for different DPIs, I wanted to know what they are. Most of the stuff I can find online is always talking about websites and "web apps" which might not all apply to desktop applications.
> 
> I see that Uwe has pointed out a performance issue which can happen because of multiple renderings due to size changes. Is that it? Or are there other reasons behind preferring PNG icons over SVG?

I think it’s mainly that SVG rendering is slow because it’s done in software, and also that qtsvg only supports SVG Tiny, so it can’t render everything that you can design in Inkscape, for example.  You have keep the SVGs simple and avoid features that we don’t support (blurs, gradients, line endings/arrowheads and lots more).  If you want full SVG support you can use webkit/webengine, but that’s overkill in many applications.

Speaking of distance field: If your icons are monochrome, you might consider making a custom icon font for your application.  You can start with something like Font Awesome, edit it to include only the icons you need, and add more custom-designed icons as necessary.  Then you can render an icon with a Text element.  But finding a suitable icon editing program is up to you in that case.  I did it with FontForge once a couple of years ago.

In the future I think it will make sense to use PDF for vector icons too (in color, even).  (Some frameworks already can do this.)  Then instead of an icon font, you could have one PDF file with all the icons for your app, one icon per “page”.  I hope to eventually support using a PDF file with an ordinary Image in QML, but we have to add API for selecting the page, and there are other issues with caching and so on.  I had patches to get it mostly working a couple of years ago, it just wasn’t 100% ready for integration.