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 Update on Monday, May 27th 2025

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.
  • SPlattenS SPlatten

    This post is deleted!

    jsulmJ Offline
    jsulmJ Offline
    jsulm
    Lifetime Qt Champion
    wrote on last edited by
    #2

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

    staleiIcon.svg

    You have a typo in the file name?

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

    1 Reply Last reply
    1
    • SPlattenS Offline
      SPlattenS Offline
      SPlatten
      wrote on last edited by
      #3
      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
        #4

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


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

                                          • Login

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