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
Forum Updated to NodeBB v4.3 + New Features

Adding SVG to resource with alias and referencing in QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
33 Posts 4 Posters 5.9k Views 1 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.
  • 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 Offline
      J.HilkJ Offline
      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 Offline
          J.HilkJ Offline
          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 Offline
              J.HilkJ Offline
              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 Offline
                  jsulmJ Offline
                  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
                              • SPlattenS SPlatten

                                This post is deleted!

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

                                @SPlatten without alias you need it.

                                SPlattenS 1 Reply Last reply
                                0
                                • JoeCFDJ JoeCFD

                                  @SPlatten without alias you need it.

                                  SPlattenS Offline
                                  SPlattenS Offline
                                  SPlatten
                                  wrote on last edited by SPlatten
                                  #26
                                  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
                                    #27

                                    @SPlatten I see. All of my images have alias. Therefore, no qrc: is needed anywhere. It is good you drop it as well without alias.
                                    I still use qrc for qml files since they do not have alias
                                    resources/qml/main.qml: source: "qrc:/qml/MainScreen.qml"
                                    resources/qml/main.qml: source: "qrc:/qml/SplashScreen.qml"
                                    I will try to remove it and let you know.

                                    Confirmed: qrc is not needed even when resource files do not have alias. qrc: can be dropped completely.
                                    But not sure why Qt did this. The code with or without qrc: should compile
                                    In Qt6 qml module version numbers are dropped. I am using Qt 5.15.2.

                                    SPlattenS 1 Reply Last reply
                                    0
                                    • JoeCFDJ JoeCFD

                                      @SPlatten I see. All of my images have alias. Therefore, no qrc: is needed anywhere. It is good you drop it as well without alias.
                                      I still use qrc for qml files since they do not have alias
                                      resources/qml/main.qml: source: "qrc:/qml/MainScreen.qml"
                                      resources/qml/main.qml: source: "qrc:/qml/SplashScreen.qml"
                                      I will try to remove it and let you know.

                                      Confirmed: qrc is not needed even when resource files do not have alias. qrc: can be dropped completely.
                                      But not sure why Qt did this. The code with or without qrc: should compile
                                      In Qt6 qml module version numbers are dropped. I am using Qt 5.15.2.

                                      SPlattenS Offline
                                      SPlattenS Offline
                                      SPlatten
                                      wrote on last edited by SPlatten
                                      #28
                                      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
                                        #29

                                        @SPlatten what is your Qt version? Is this on Linux?
                                        check the file path in your compiled qrc_images.cpp. All your images are compiled into this file. This is my setting.

                                        <RCC>
                                            <qresource prefix="/res">
                                                <file alias="background">images/SplashBackground.png</file>
                                            </qresource>
                                        </RCC>
                                        
                                            Image { /* background image works */
                                                anchors.centerIn: parent
                                                source: "/res/background"
                                                width: parent.width
                                                height: parent.height
                                            }
                                        
                                        SPlattenS 1 Reply Last reply
                                        0
                                        • JoeCFDJ JoeCFD

                                          @SPlatten what is your Qt version? Is this on Linux?
                                          check the file path in your compiled qrc_images.cpp. All your images are compiled into this file. This is my setting.

                                          <RCC>
                                              <qresource prefix="/res">
                                                  <file alias="background">images/SplashBackground.png</file>
                                              </qresource>
                                          </RCC>
                                          
                                              Image { /* background image works */
                                                  anchors.centerIn: parent
                                                  source: "/res/background"
                                                  width: parent.width
                                                  height: parent.height
                                              }
                                          
                                          SPlattenS Offline
                                          SPlattenS Offline
                                          SPlatten
                                          wrote on last edited by
                                          #30
                                          This post is deleted!
                                          SPlattenS 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