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. Adding SVG to resource with alias and referencing in QML

Adding SVG to resource with alias and referencing in QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
33 Posts 4 Posters 5.4k Views
  • 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.
  • J.HilkJ J.Hilk

    @SPlatten are you sure staleIndicator expects an item and not just the image path?

    SPlattenS Offline
    SPlattenS Offline
    SPlatten
    wrote on last edited by SPlatten
    #5
    This post is deleted!
    SPlattenS 1 Reply Last reply
    0
    • SPlattenS SPlatten

      This post is deleted!

      SPlattenS Offline
      SPlattenS Offline
      SPlatten
      wrote on last edited by SPlatten
      #6
      This post is deleted!
      SPlattenS 1 Reply Last reply
      0
      • SPlattenS SPlatten

        This post is deleted!

        SPlattenS Offline
        SPlattenS Offline
        SPlatten
        wrote on last edited by
        #7
        This post is deleted!
        J.HilkJ 1 Reply Last reply
        0
        • SPlattenS SPlatten

          This post is deleted!

          J.HilkJ Online
          J.HilkJ Online
          J.Hilk
          Moderators
          wrote on last edited by
          #8

          @SPlatten there is no magic to it.

          right click on the sources in QtCreator -> copy path -> use as source in Image component

          more important questions:

          • Does your SVG follow "tiny 1.2" specifications?
          • For what platform was it? IIRC for iOS there was no SVG support and it may not be the only one

          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          SPlattenS 1 Reply Last reply
          0
          • J.HilkJ J.Hilk

            @SPlatten there is no magic to it.

            right click on the sources in QtCreator -> copy path -> use as source in Image component

            more important questions:

            • Does your SVG follow "tiny 1.2" specifications?
            • For what platform was it? IIRC for iOS there was no SVG support and it may not be the only one
            SPlattenS Offline
            SPlattenS Offline
            SPlatten
            wrote on last edited by SPlatten
            #9
            This post is deleted!
            J.HilkJ 1 Reply Last reply
            0
            • SPlattenS SPlatten

              This post is deleted!

              J.HilkJ Online
              J.HilkJ Online
              J.Hilk
              Moderators
              wrote on last edited by J.Hilk
              #10

              @SPlatten said in Adding SVG to resource with alias and referencing in QML:

              [Edit] When Copy Path or Copy URL ?

              I did write path, didn't I?
              The one starting with :


              I see no baseProfile="tiny" in your xml code, so, it will probably not work


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              SPlattenS 1 Reply Last reply
              0
              • J.HilkJ J.Hilk

                @SPlatten said in Adding SVG to resource with alias and referencing in QML:

                [Edit] When Copy Path or Copy URL ?

                I did write path, didn't I?
                The one starting with :


                I see no baseProfile="tiny" in your xml code, so, it will probably not work

                SPlattenS Offline
                SPlattenS Offline
                SPlatten
                wrote on last edited by SPlatten
                #11
                This post is deleted!
                J.HilkJ 1 Reply Last reply
                0
                • SPlattenS SPlatten

                  This post is deleted!

                  J.HilkJ Online
                  J.HilkJ Online
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #12

                  @SPlatten soooo
                  first of, I would like to apologise, copy url is actually the correct one :D

                  secondly, do use a "tiny" svg it will work:

                  //main.qml
                  import QtQuick 2.15
                  import QtQuick.Controls 2.15
                  import QtQuick.Window 2.15
                  import QtQuick.Layouts 1.15
                  
                  Window {
                      id: root
                      width: 800
                      height: 600
                      visible: true
                  
                      Image{
                          id:img
                          anchors.fill: parent
                          source: "qrc:/SomeAliasedSVG.svg"
                      }
                  }
                  
                  rsc.qrc
                  <RCC>
                      <qresource prefix="/">
                          <file>main.qml</file>
                          <file alias="SomeAliasedSVG.svg">01_01.svg</file>
                      </qresource>
                  </RCC>
                  
                  //svg file
                  <?xml version="1.0"?>
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
                       viewBox="0 0 30 30">
                    <desc>Example SVG file</desc>
                    <rect x="10" y="10" width="10" height="10" fill="red"/>
                  </svg>
                  
                  

                  works exactly as expected:

                  66451e7e-3cdb-4901-b43b-260b6a8e63c7-image.png


                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  SPlattenS 1 Reply Last reply
                  0
                  • J.HilkJ J.Hilk

                    @SPlatten soooo
                    first of, I would like to apologise, copy url is actually the correct one :D

                    secondly, do use a "tiny" svg it will work:

                    //main.qml
                    import QtQuick 2.15
                    import QtQuick.Controls 2.15
                    import QtQuick.Window 2.15
                    import QtQuick.Layouts 1.15
                    
                    Window {
                        id: root
                        width: 800
                        height: 600
                        visible: true
                    
                        Image{
                            id:img
                            anchors.fill: parent
                            source: "qrc:/SomeAliasedSVG.svg"
                        }
                    }
                    
                    rsc.qrc
                    <RCC>
                        <qresource prefix="/">
                            <file>main.qml</file>
                            <file alias="SomeAliasedSVG.svg">01_01.svg</file>
                        </qresource>
                    </RCC>
                    
                    //svg file
                    <?xml version="1.0"?>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
                         viewBox="0 0 30 30">
                      <desc>Example SVG file</desc>
                      <rect x="10" y="10" width="10" height="10" fill="red"/>
                    </svg>
                    
                    

                    works exactly as expected:

                    66451e7e-3cdb-4901-b43b-260b6a8e63c7-image.png

                    SPlattenS Offline
                    SPlattenS Offline
                    SPlatten
                    wrote on last edited by SPlatten
                    #13
                    This post is deleted!
                    J.HilkJ 1 Reply Last reply
                    0
                    • SPlattenS SPlatten

                      This post is deleted!

                      J.HilkJ Online
                      J.HilkJ Online
                      J.Hilk
                      Moderators
                      wrote on last edited by
                      #14

                      @SPlatten 🤷‍♂️

                      can you make a minimal compile able example for us ?


                      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                      Q: What's that?
                      A: It's blue light.
                      Q: What does it do?
                      A: It turns blue.

                      SPlattenS 1 Reply Last reply
                      0
                      • J.HilkJ J.Hilk

                        @SPlatten 🤷‍♂️

                        can you make a minimal compile able example for us ?

                        SPlattenS Offline
                        SPlattenS Offline
                        SPlatten
                        wrote on last edited by SPlatten
                        #15
                        This post is deleted!
                        J.HilkJ 1 Reply Last reply
                        0
                        • SPlattenS SPlatten

                          This post is deleted!

                          J.HilkJ Online
                          J.HilkJ Online
                          J.Hilk
                          Moderators
                          wrote on last edited by
                          #16

                          @SPlatten it's not really compile able, is it ?
                          I don't have your *pro, nor your main.cpp file, nor the folder structure you claim to have.

                          also giving your Image a width and height does help, because its super tiny without it

                          6c92a047-9b16-49e7-a30c-3268920f25d6-image.png


                          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                          Q: What's that?
                          A: It's blue light.
                          Q: What does it do?
                          A: It turns blue.

                          SPlattenS 1 Reply Last reply
                          0
                          • J.HilkJ J.Hilk

                            @SPlatten it's not really compile able, is it ?
                            I don't have your *pro, nor your main.cpp file, nor the folder structure you claim to have.

                            also giving your Image a width and height does help, because its super tiny without it

                            6c92a047-9b16-49e7-a30c-3268920f25d6-image.png

                            SPlattenS Offline
                            SPlattenS Offline
                            SPlatten
                            wrote on last edited by SPlatten
                            #17
                            This post is deleted!
                            jsulmJ 1 Reply Last reply
                            0
                            • SPlattenS SPlatten

                              This post is deleted!

                              jsulmJ Online
                              jsulmJ Online
                              jsulm
                              Lifetime Qt Champion
                              wrote on last edited by
                              #18

                              @SPlatten said in Adding SVG to resource with alias and referencing in QML:

                              Are they ?

                              They are relevant to have a compilable example...

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

                              SPlattenS 1 Reply Last reply
                              0
                              • jsulmJ jsulm

                                @SPlatten said in Adding SVG to resource with alias and referencing in QML:

                                Are they ?

                                They are relevant to have a compilable example...

                                SPlattenS Offline
                                SPlattenS Offline
                                SPlatten
                                wrote on last edited by SPlatten
                                #19
                                This post is deleted!
                                1 Reply Last reply
                                0
                                • SPlattenS Offline
                                  SPlattenS Offline
                                  SPlatten
                                  wrote on last edited by SPlatten
                                  #20
                                  This post is deleted!
                                  1 Reply Last reply
                                  0
                                  • JoeCFDJ Offline
                                    JoeCFDJ Offline
                                    JoeCFD
                                    wrote on last edited by
                                    #21

                                    simply:
                                    source: "/images/stale.svg"

                                    SPlattenS 1 Reply Last reply
                                    0
                                    • JoeCFDJ JoeCFD

                                      simply:
                                      source: "/images/stale.svg"

                                      SPlattenS Offline
                                      SPlattenS Offline
                                      SPlatten
                                      wrote on last edited by
                                      #22
                                      This post is deleted!
                                      JoeCFDJ 1 Reply Last reply
                                      0
                                      • SPlattenS SPlatten

                                        This post is deleted!

                                        JoeCFDJ Offline
                                        JoeCFDJ Offline
                                        JoeCFD
                                        wrote on last edited by JoeCFD
                                        #23

                                        @SPlatten Yes. You can drop qrc: and alias + root / is good enough.

                                        SPlattenS 1 Reply Last reply
                                        0
                                        • JoeCFDJ JoeCFD

                                          @SPlatten Yes. You can drop qrc: and alias + root / is good enough.

                                          SPlattenS Offline
                                          SPlattenS Offline
                                          SPlatten
                                          wrote on last edited by
                                          #24
                                          This post is deleted!
                                          JoeCFDJ 1 Reply Last reply
                                          0

                                          • Login

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