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.
  • J J.Hilk
    23 Sept 2022, 06:25

    @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

    S Offline
    S Offline
    SPlatten
    wrote on 23 Sept 2022, 06:36 last edited by SPlatten
    #13
    This post is deleted!
    J 1 Reply Last reply 23 Sept 2022, 06:41
    0
    • S SPlatten
      23 Sept 2022, 06:36

      This post is deleted!

      J Offline
      J Offline
      J.Hilk
      Moderators
      wrote on 23 Sept 2022, 06:41 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.

      S 1 Reply Last reply 23 Sept 2022, 06:44
      0
      • J J.Hilk
        23 Sept 2022, 06:41

        @SPlatten 🤷‍♂️

        can you make a minimal compile able example for us ?

        S Offline
        S Offline
        SPlatten
        wrote on 23 Sept 2022, 06:44 last edited by SPlatten
        #15
        This post is deleted!
        J 1 Reply Last reply 23 Sept 2022, 07:01
        0
        • S SPlatten
          23 Sept 2022, 06:44

          This post is deleted!

          J Offline
          J Offline
          J.Hilk
          Moderators
          wrote on 23 Sept 2022, 07:01 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.

          S 1 Reply Last reply 23 Sept 2022, 07:08
          0
          • J J.Hilk
            23 Sept 2022, 07:01

            @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

            S Offline
            S Offline
            SPlatten
            wrote on 23 Sept 2022, 07:08 last edited by SPlatten
            #17
            This post is deleted!
            J 1 Reply Last reply 23 Sept 2022, 07:21
            0
            • S SPlatten
              23 Sept 2022, 07:08

              This post is deleted!

              J Offline
              J Offline
              jsulm
              Lifetime Qt Champion
              wrote on 23 Sept 2022, 07:21 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

              S 1 Reply Last reply 23 Sept 2022, 07:28
              0
              • J jsulm
                23 Sept 2022, 07:21

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

                Are they ?

                They are relevant to have a compilable example...

                S Offline
                S Offline
                SPlatten
                wrote on 23 Sept 2022, 07:28 last edited by SPlatten
                #19
                This post is deleted!
                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  SPlatten
                  wrote on 23 Sept 2022, 12:48 last edited by SPlatten
                  #20
                  This post is deleted!
                  1 Reply Last reply
                  0
                  • J Online
                    J Online
                    JoeCFD
                    wrote on 23 Sept 2022, 13:25 last edited by
                    #21

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

                    S 1 Reply Last reply 23 Sept 2022, 13:30
                    0
                    • J JoeCFD
                      23 Sept 2022, 13:25

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

                      S Offline
                      S Offline
                      SPlatten
                      wrote on 23 Sept 2022, 13:30 last edited by
                      #22
                      This post is deleted!
                      J 1 Reply Last reply 23 Sept 2022, 13:33
                      0
                      • S SPlatten
                        23 Sept 2022, 13:30

                        This post is deleted!

                        J Online
                        J Online
                        JoeCFD
                        wrote on 23 Sept 2022, 13:33 last edited by JoeCFD
                        #23

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

                        S 1 Reply Last reply 23 Sept 2022, 13:34
                        0
                        • J JoeCFD
                          23 Sept 2022, 13:33

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

                          S Offline
                          S Offline
                          SPlatten
                          wrote on 23 Sept 2022, 13:34 last edited by
                          #24
                          This post is deleted!
                          J 1 Reply Last reply 23 Sept 2022, 13:35
                          0
                          • S SPlatten
                            23 Sept 2022, 13:34

                            This post is deleted!

                            J Online
                            J Online
                            JoeCFD
                            wrote on 23 Sept 2022, 13:35 last edited by
                            #25

                            @SPlatten without alias you need it.

                            S 1 Reply Last reply 23 Sept 2022, 13:37
                            0
                            • J JoeCFD
                              23 Sept 2022, 13:35

                              @SPlatten without alias you need it.

                              S Offline
                              S Offline
                              SPlatten
                              wrote on 23 Sept 2022, 13:37 last edited by SPlatten
                              #26
                              This post is deleted!
                              J 1 Reply Last reply 23 Sept 2022, 13:46
                              0
                              • S SPlatten
                                23 Sept 2022, 13:37

                                This post is deleted!

                                J Online
                                J Online
                                JoeCFD
                                wrote on 23 Sept 2022, 13:46 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.

                                S 1 Reply Last reply 23 Sept 2022, 13:52
                                0
                                • J JoeCFD
                                  23 Sept 2022, 13:46

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

                                  S Offline
                                  S Offline
                                  SPlatten
                                  wrote on 23 Sept 2022, 13:52 last edited by SPlatten
                                  #28
                                  This post is deleted!
                                  J 1 Reply Last reply 23 Sept 2022, 13:54
                                  0
                                  • S SPlatten
                                    23 Sept 2022, 13:52

                                    This post is deleted!

                                    J Online
                                    J Online
                                    JoeCFD
                                    wrote on 23 Sept 2022, 13:54 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
                                        }
                                    
                                    S 1 Reply Last reply 23 Sept 2022, 13:58
                                    0
                                    • J JoeCFD
                                      23 Sept 2022, 13:54

                                      @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
                                          }
                                      
                                      S Offline
                                      S Offline
                                      SPlatten
                                      wrote on 23 Sept 2022, 13:58 last edited by
                                      #30
                                      This post is deleted!
                                      S 1 Reply Last reply 26 Sept 2022, 07:37
                                      0
                                      • S SPlatten
                                        23 Sept 2022, 13:58

                                        This post is deleted!

                                        S Offline
                                        S Offline
                                        SPlatten
                                        wrote on 26 Sept 2022, 07:37 last edited by SPlatten
                                        #31

                                        @JoeCFD , I decided to create a simple application to experiment with the resources. I used the same SVG file. The resource file:

                                        <RCC>
                                            <qresource prefix="/">
                                                <file alias="stale.svg">stale.svg</file>
                                                <file>mainWindow.qml</file>
                                            </qresource>
                                        </RCC>
                                        

                                        In the mainwindow:

                                        void MainWindow::paintEvent(QPaintEvent *pobjEvt) {
                                            Q_UNUSED(pobjEvt);
                                        
                                            QPainter objPainter(this);
                                            QImage* pobjImage(new QImage(":/stale.svg"));
                                        
                                            bool blnIsNull(pobjImage->isNull());
                                            qDebug() << QString("Image isNull: %1").arg(((blnIsNull == true) ? "Yes" : "No"));
                                        
                                            objPainter.drawImage(10, 10, *pobjImage);
                                        }
                                        

                                        This works absolutely fine and the iamge is displayed correctly. I will not try to use this to figure out why the original isn't working.

                                        S J 2 Replies Last reply 26 Sept 2022, 11:52
                                        0
                                        • S SPlatten
                                          26 Sept 2022, 07:37

                                          @JoeCFD , I decided to create a simple application to experiment with the resources. I used the same SVG file. The resource file:

                                          <RCC>
                                              <qresource prefix="/">
                                                  <file alias="stale.svg">stale.svg</file>
                                                  <file>mainWindow.qml</file>
                                              </qresource>
                                          </RCC>
                                          

                                          In the mainwindow:

                                          void MainWindow::paintEvent(QPaintEvent *pobjEvt) {
                                              Q_UNUSED(pobjEvt);
                                          
                                              QPainter objPainter(this);
                                              QImage* pobjImage(new QImage(":/stale.svg"));
                                          
                                              bool blnIsNull(pobjImage->isNull());
                                              qDebug() << QString("Image isNull: %1").arg(((blnIsNull == true) ? "Yes" : "No"));
                                          
                                              objPainter.drawImage(10, 10, *pobjImage);
                                          }
                                          

                                          This works absolutely fine and the iamge is displayed correctly. I will not try to use this to figure out why the original isn't working.

                                          S Offline
                                          S Offline
                                          SPlatten
                                          wrote on 26 Sept 2022, 11:52 last edited by
                                          #32
                                          This post is deleted!
                                          1 Reply Last reply
                                          0

                                          22/33

                                          23 Sept 2022, 13:30

                                          • Login

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