Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Qt SVG : Dynamic Modification
Forum Updated to NodeBB v4.3 + New Features

Qt SVG : Dynamic Modification

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
17 Posts 6 Posters 3.4k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Parvathy2020

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

    jsulmJ Offline
    jsulmJ Offline
    jsulm
    Lifetime Qt Champion
    wrote on last edited by
    #4

    @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.

    https://forum.qt.io/topic/113070/qt-code-of-conduct

    P 1 Reply Last reply
    2
    • jsulmJ 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.

      P Offline
      P Offline
      Parvathy2020
      wrote on last edited by
      #5

      @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 ?

      jsulmJ 1 Reply Last reply
      0
      • P 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 ?

        jsulmJ Offline
        jsulmJ Offline
        jsulm
        Lifetime Qt Champion
        wrote on last edited by
        #6

        @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

        https://forum.qt.io/topic/113070/qt-code-of-conduct

        P mzimmersM 2 Replies Last reply
        4
        • jsulmJ 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

          P Offline
          P Offline
          Parvathy2020
          wrote on last edited by
          #7

          @jsulm Ok thanks

          1 Reply Last reply
          0
          • jsulmJ 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

            mzimmersM Offline
            mzimmersM Offline
            mzimmers
            wrote on last edited by
            #8

            @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...

            fcarneyF 1 Reply Last reply
            1
            • mzimmersM 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...

              fcarneyF Offline
              fcarneyF Offline
              fcarney
              wrote on last edited by
              #9

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

              C++ is a perfectly valid school of magic.

              mzimmersM 1 Reply Last reply
              1
              • fcarneyF fcarney

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

                mzimmersM Offline
                mzimmersM Offline
                mzimmers
                wrote on last edited by
                #10

                @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.

                fcarneyF JKSHJ 3 Replies Last reply
                0
                • mzimmersM 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.

                  fcarneyF Offline
                  fcarneyF Offline
                  fcarney
                  wrote on last edited by
                  #11

                  @mzimmers Ah, yeah, that sucks.

                  C++ is a perfectly valid school of magic.

                  1 Reply Last reply
                  0
                  • mzimmersM 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.

                    fcarneyF Offline
                    fcarneyF Offline
                    fcarney
                    wrote on last edited by
                    #12

                    @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.

                    C++ is a perfectly valid school of magic.

                    1 Reply Last reply
                    1
                    • mzimmersM Offline
                      mzimmersM Offline
                      mzimmers
                      wrote on last edited by
                      #13

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

                      1 Reply Last reply
                      0
                      • mzimmersM 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.

                        JKSHJ Offline
                        JKSHJ Offline
                        JKSH
                        Moderators
                        wrote on last edited by
                        #14

                        @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
                            }
                        }
                        

                        Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

                        mzimmersM 1 Reply Last reply
                        1
                        • JKSHJ 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
                              }
                          }
                          
                          mzimmersM Offline
                          mzimmersM Offline
                          mzimmers
                          wrote on last edited by
                          #15

                          @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.

                          L JKSHJ 2 Replies Last reply
                          0
                          • mzimmersM 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.

                            L Offline
                            L Offline
                            lemons
                            wrote on last edited by
                            #16

                            @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
                            }
                            
                            1 Reply Last reply
                            1
                            • mzimmersM 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.

                              JKSHJ Offline
                              JKSHJ Offline
                              JKSH
                              Moderators
                              wrote on last edited by
                              #17

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

                              Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

                              1 Reply Last reply
                              1

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved