Qt SVG : Dynamic Modification

[Parvathy2020]

Hi,
I need to modify the property of different elements of a SVG file dynamically based on some conditions.
Please note, it is not the entire SVG file that need to be modified. It should be able to access different elements of the svg file and to change the property of the elements . For example, if an svg file is amde of 5 rectangle elements, it should be able to change the color of the individual rectangles based on some dynamic conditions.

Is this supported and doable in Qt . Please provide a solution.

[jsulm]

@Parvathy2020 SVG is based on XML, so you can use https://doc.qt.io/qt-5/qtxml-index.html

[Parvathy2020]

@jsulm Is there any in built QT library that supports the dynamic modification of property of xml element in SVG file ?

[jsulm]

@Parvathy2020 The link I posted before is Qt documentation for XML support. There is nothing special in Qt to modify SVG as far as I know, but as I said SVG is XML.

[Parvathy2020]

@jsulm Yes , SVG is made of xml elements. But how to edit the svg file dynamically -> parse the xml element -> update the property-> save the change- > display the updated svg image ??
Is there any code reference ?

[jsulm]

@Parvathy2020 Did you read the documentation from the link I provided?!
If you need examples here you go: https://doc.qt.io/qt-5/examples-xml.html

[Parvathy2020]

@jsulm Ok thanks

[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)}`
}