From d21e9d133697719a023d379ed2fe660f118b14ce Mon Sep 17 00:00:00 2001 From: ItsDrike Date: Mon, 9 Dec 2024 20:57:48 +0100 Subject: [PATCH] Fix SVG scaling in QML For some reason, the default QML Image element doesn't scale SVGs like it should. Essentially, it just reads the source size of the SVG and scales it like it would a regular image (say PNG). I'm fixing this by manually setting the source size of the image to the current size. That said, this is in my opinion a hacky fix and it's really weird that QML doesn't special-case SVGs and scale them as it should. Source: https://stackoverflow.com/questions/69641034/qml-image-does-not-stretch-fit-svg --- qml/CardModel.qml | 5 +++++ qml/DrawPile.qml | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/qml/CardModel.qml b/qml/CardModel.qml index 9815ab5..04a7855 100644 --- a/qml/CardModel.qml +++ b/qml/CardModel.qml @@ -18,6 +18,11 @@ Item { anchors.fill: parent source: cardModel.isFaceDown ? "qrc:/img/playing_cards/backs/" + cardModel.backStyle + ".svg" : cardModel.card ? "qrc:/img/playing_cards/fronts/" + cardModel.card.suitString + "_" + cardModel.card.valueString + ".svg" : "qrc:/img/playing_cards/backs/blue.svg" + + // This makes sure the SVG scales properly, otherwise it would + // attempt to scale the image from the original source size, which + // can end up being blurry. + sourceSize: Qt.size(width, height) fillMode: Image.PreserveAspectFit MouseArea { diff --git a/qml/DrawPile.qml b/qml/DrawPile.qml index 771c643..9354ed7 100644 --- a/qml/DrawPile.qml +++ b/qml/DrawPile.qml @@ -41,6 +41,12 @@ Item { source: "qrc:/img/flip_icon.svg" width: parent.width * 0.5 height: width + + // This makes sure the SVG scales properly, otherwise it would + // attempt to scale the image from the original source size, which + // can end up being blurry. + sourceSize: Qt.size(width, height) + fillMode: Image.Stretch } }