Looking for best practices on SVG's in QDS?

Amulex

Hello!

I am using QDS and wanted to know how to use .SVG's properly. Initially, I started within Figma and then I used QT Bridge to export and then import within QDS.
My code looks something like this:

import QtQuick
import QtQuick.Controls
import QtQuick.Studio.Components 1.0
import QtQuick.Shapes 1.0

Rectangle {
    id: inventory
    width: 48
    height: 48
    color: "transparent"
    state: "active_true"
    clip: true

    SvgPathItem {
        id: primary
        width: 36
        height: 32
        anchors.verticalCenter: parent.verticalCenter
        strokeWidth: 1
        strokeStyle: 1
        strokeColor: "transparent"
        path: "M 15.5 0 L 13 0 C 11.34375 0 10 1.34375 10 3 L 10 10 C 10 12.206249952316284 11.793750047683716 14 14 14 L 22 14 C 24.206249952316284 14 26 12.206249952316284 26 10 L 26 3 C 26 1.34375 24.65625 0 23 0 L 20.5 0 L 20.5 5 C 20.5 5.550000011920929 20.05000001192093 6 19.5 6 L 16.5 6 C 15.949999988079071 6 15.5 5.550000011920929 15.5 5 L 15.5 0 Z M 4 16 C 1.7937500476837158 16 0 17.793750047683716 0 20 L 0 28 C 0 30.206249952316284 1.7937500476837158 32 4 32 L 14 32 C 16.206249952316284 32 18 30.206249952316284 18 28 L 18 20 C 18 17.793750047683716 16.206249952316284 16 14 16 L 11.5 16 L 11.5 21 C 11.5 21.55000001192093 11.050000011920929 22 10.5 22 L 7.5 22 C 6.949999988079071 22 6.5 21.55000001192093 6.5 21 L 6.5 16 L 4 16 Z M 22 32 L 32 32 C 34.206249952316284 32 36 30.206249952316284 36 28 L 36 20 C 36 17.793750047683716 34.206249952316284 16 32 16 L 29.5 16 L 29.5 21 C 29.5 21.55000001192093 29.05000001192093 22 28.5 22 L 25.5 22 C 24.94999998807907 22 24.5 21.55000001192093 24.5 21 L 24.5 16 L 22 16 C 21.0625 16 20.19999921321869 16.318749248981476 19.518749237060547 16.862499237060547 C 19.82499924302101 17.51249921321869 20 18.23750001192093 20 19 L 20 29 C 20 29.76249998807907 19.82499924302101 30.48750078678131 19.518749237060547 31.137500762939453 C 20.19999921321869 31.681250751018524 21.0625 32 22 32 Z"
        joinStyle: 0
        fillColor: "#000000"
        antialiasing: true
        anchors.horizontalCenter: parent.horizontalCenter
    }
    states: [
        State {
            name: "active_true"

            PropertyChanges {
                target: primary
                fillColor: "#000000"
            }
        },
        State {
            name: "active_false"

            PropertyChanges {
                target: primary
                fillColor: "#80000000"
            }
        }
    ]
}

/*##^##
Designer {
    D{i:0;uuid:"79d8c71e-d80c-5db6-814a-282abdddaeb9"}D{i:1;uuid:"069b976e-953a-5bd8-94f0-c8457df85573"}
}
##^##*/

The issue is that the svg looks blurry in both QDS preview and the real application. I tried creating a separate .svg icon but QDS threw the error "No such file or location" but it was showing up in the window before the render. Upon rendering the svg's disappeared and gave the output "No such file or location"

How do I properly handle SVG's without the blurriness?

Thanks!
Andy

James123

One possible reason for the blurriness could be that the path data is scaled down too much inside the SvgPathItem. QDS tends to rasterize at lower resolution if the source size and item size don’t match. Keeping the original viewBox from the SVG file and adjusting the width/height proportionally may help.