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
QtWS25 Last Chance

Adding SVG to resource with alias and referencing in QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
33 Posts 4 Posters 5.3k 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.
  • SPlattenS SPlatten

    This post is deleted!

    J.HilkJ Offline
    J.HilkJ Offline
    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 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

                                          • Login

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