Search code examples
qtqt5.4qt5.6

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


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
}

Solution

  • 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
        }
    }