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
This commit is contained in:
ItsDrike 2024-12-09 20:57:48 +01:00
parent e56171f49c
commit d21e9d1336
Signed by: ItsDrike
GPG key ID: FA2745890B7048C0
2 changed files with 11 additions and 0 deletions

View file

@ -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 {

View file

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