@A-Former-User said in Properly scaling SVG Images:
Hi swegmann!
The following code is more an ugly trick than a solution, but at least it does what it's supposed to do and you get rid of the binding loop:
Image {
source: "file:///home/pw/Downloads/SVG_logo.svg"
sourceSize: Qt.size( img.sourceSize.width*2, img.sourceSize.height*2 )
Image {
id: img
source: parent.source
width: 0
height: 0
}
}
(Funny. When I clicked "reply" the forum wanted to caution me that this thread is quite old. And yet... I arrived here because I still needed to learn the sourceSize hack this many years later.)
The code snippet above demonstrating how to fix SVG blur using sourceSize is great.
I'm surely not the first to notice, but you can also then go "one small step further" and make a reusable custom element that will be well-behaved for scaling factors other than "2". Indeed, it should be generalized/reusable for an SVG of any size (any "native" or "starting" size) and any target size or any stretch-due-to-anchoring.
It would look like this:
import QtQuick 2.12
import QtQuick.Controls 2.12
Image {
// Thanks to this hack, qml can now only DOWN-SCALE/SHRINK the SVG, which won't cause blurriness/pixelation
sourceSize: Qt.size(
// first "trick" qml that the SVG is larger than we EVER NEED
Math.max(hiddenImg.sourceSize.width, 250),
// change 250 to a per-project "biggest icon in project" value
Math.max(hiddenImg.sourceSize.height, 250))
Image {
id: hiddenImg
source: parent.source
width: 0
height: 0
}
}
You can build-and-run a full working sample here. (It can also be launched simply with qmlscene).
