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 6.5k 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.
  • 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