Qt SVG : Dynamic Modification

[mzimmers]

@jsulm (as long as I'm replying to old topics today...)

I've got a similar question, best explained through an example. I have a QML TabBar containing several (customized) TabButtons.
When a given tab is selected, the icon is to be filled in; when not selected, it's to be an outline only.

The above is easily enough done at the file level by modifying the stroke-opacity field. But, as the OP and you point out, this necessitates file level changes. Impractical, and (I think) impossible when the files are embedded as resources.

I think the answer to my question is "no," but...is there some way to modify the "properties" (for lack of a better term) of the .svg file programmatically? So I can toggle the fill of my image based on tab selection.

Thanks for any ideas...

[fcarney]

@mzimmers I use Shape for complex dynamic things that can change. It works really well.

[mzimmers]

@fcarney in this case, I'm given .svg files from the UX team. I'd have to translate them into QML Shapes, which I suppose isn't terrible, but being the creatively lazy guy I am, I'm hoping for something more straightforward.

[fcarney]

@mzimmers Ah, yeah, that sucks.

[fcarney]

@mzimmers Maybe you can do something with PathSVG. I played with this a bit for my own stuff. Might be able to pick apart the file and color each the way you want.

[mzimmers]

@fcarney that's definitely on the right track. Looks like I need to find (or write) a .svg to Qt Path converter.

[JKSH]

@mzimmers said in Qt SVG : Dynamic Modification:

this necessitates file level changes. Impractical, and (I think) impossible when the files are embedded as resources.

You could do string replacements and pass the final document to an Image as a Data URL:

Window {
    width: 640
    height: 480
    visible: true

    property string svgStr: `<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="${colours.currentText}"/></svg>`

    ComboBox {
        id: colours
        model: ["red", "green", "blue"]
    }

    Image {
        anchors.centerIn: parent
        source: `data:image/svg+xml;base64,${Qt.btoa(svgStr)}`
        sourceSize.width: 300
        sourceSize.height: 300
    }
}

[mzimmers]

@JKSH this is probably the way to go for most cases, and (I imagine) solves the OP's question. (I'll need to build around this, as I'm currently using the icon property of TabButton.)

@fcarney @JKSH this has been educational; thanks.

[lemons]

@mzimmers if it is only for icons, did you think about simply converting them into a ligature font (named icons). This way you can use the icons as font in a QML Text element.

Text {
    font.family: "myLigatureFontName" // e.g. FontAwesome Pro
    font.pointSize: 32
    text: "myLigatureIconName" // e.g. "home" for a house-icon
    color: "transparent" // font color
    style: Text.Outline  // if you need outline
    styleColor: "red"    // outline color
}

[JKSH]

@mzimmers said in Qt SVG : Dynamic Modification:

(I'll need to build around this, as I'm currently using the icon property of TabButton.)

@fcarney @JKSH this has been educational; thanks.

You're welcome.

Works for button icons too!

TabButton {
    text: "Click Me"
    icon.source: `data:image/svg+xml;base64,${Qt.btoa(svgStr)}`
}