How to make svg icons crisp again in Qt 5.6 on high DPI screens
Asked Answered
H

2

3

Upgrading from Qt 5.4 to Qt 5.6 made all my .svg icons blurry/pixelated. I noticed this happens only on high density screens like on my MacBookPro Retina Display. I read the documentation of High DPI support in Qt 5.6 and I have set the QT_AUTO_SCREEN_SCALE_FACTOR=1 environment variable, but it didn't have much effect. Anybody has this issue? I have also found this bug report which probably relates to my question.

EDIT 1:

A simple example would be:

Image {
  source: my_icon.svg
  sourceSize.width: 50
  sourceSize.height: 50
  anchor.centerIn: parent
}
Hypnotist answered 22/6, 2016 at 19:25 Comment(2)
What scale factor is your display? The bug report only deals with decimal values. If it is a decimal value, then the bug report is the source of your problem.Pandemic
I don't know, but if I force the scale factor with QT_SCALE_FACTOR to a non decimal value I have the same problem.Hypnotist
H
3

This is an ugly hack, but it did the trick:

Item {
    property alias image: mySvgImage

    implicitWidth: mySvgImage.paintedWidth
    implicitHeight: mySvgImage.implicitHeight / Screen.devicePixelRatio

    Image {
        id: mySvgImage

        sourceSize.width: width * Screen.devicePixelRatio
        sourceSize.height: height * Screen.devicePixelRatio
    }
}
Hypnotist answered 28/7, 2016 at 12:46 Comment(2)
Sadly this doesn't work on systems with mixed-DPI screens. There's a binding loop, so every time the Screen.devicePixelRatio changes, it settles on a new size - generally getting bigger every time...Dissymmetry
Thanks for the heads up @Richard1403832, will try to reproduce. Btw I have since then upgraded all the way till Qt 5.12.6 and the issue is still present.Hypnotist
I
4

I'm not sure how to apply this in QML, but you need to set the attribute AA_UseHighDpiPixmaps with QWidgets. Might well be the same with QML. E.g:

app.setAttribute(Qt.AA_UseHighDpiPixmaps)
Immaterialism answered 28/12, 2019 at 5:34 Comment(1)
The question was related to QML but you still did post a very useful answer. Thanks!Kranz
H
3

This is an ugly hack, but it did the trick:

Item {
    property alias image: mySvgImage

    implicitWidth: mySvgImage.paintedWidth
    implicitHeight: mySvgImage.implicitHeight / Screen.devicePixelRatio

    Image {
        id: mySvgImage

        sourceSize.width: width * Screen.devicePixelRatio
        sourceSize.height: height * Screen.devicePixelRatio
    }
}
Hypnotist answered 28/7, 2016 at 12:46 Comment(2)
Sadly this doesn't work on systems with mixed-DPI screens. There's a binding loop, so every time the Screen.devicePixelRatio changes, it settles on a new size - generally getting bigger every time...Dissymmetry
Thanks for the heads up @Richard1403832, will try to reproduce. Btw I have since then upgraded all the way till Qt 5.12.6 and the issue is still present.Hypnotist

© 2022 - 2024 — McMap. All rights reserved.