Qt SVG : Dynamic Modification
-
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.
-
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.
@Parvathy2020 SVG is based on XML, so you can use https://doc.qt.io/qt-5/qtxml-index.html
-
@Parvathy2020 SVG is based on XML, so you can use https://doc.qt.io/qt-5/qtxml-index.html
@jsulm Is there any in built QT library that supports the dynamic modification of property of xml element in SVG file ?
-
@jsulm Is there any in built QT library that supports the dynamic modification of property of xml element in SVG file ?
@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 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.
@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 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 ?@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 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@jsulm Ok thanks
-
@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@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...
-
@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 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 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 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.
@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 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 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 }
-
@mzimmers said in Qt SVG : Dynamic Modification:
(I'll need to build around this, as I'm currently using the icon property of TabButton.)
You're welcome.
Works for button icons too!
TabButton { text: "Click Me" icon.source: `data:image/svg+xml;base64,${Qt.btoa(svgStr)}` }