Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to use SVG
Forum Update on Monday, May 27th 2025

How to use SVG

Scheduled Pinned Locked Moved Unsolved General and Desktop
svgiconwidget
33 Posts 7 Posters 17.0k 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.
  • M Offline
    M Offline
    mrjj
    Lifetime Qt Champion
    wrote on 1 Jul 2021, 17:35 last edited by
    #2

    Hi and welcome to the forums

    Well you need to add
    QT += svg
    to the profile. ( and run qmake after)

    https://doc.qt.io/qt-5/qtsvg-index.html

    Then you can use SVG in most places where you would use a .PNG

    Do you want to use them for icons or showing a big SVG on th screen or what is the goal ?

    S 1 Reply Last reply 1 Jul 2021, 18:48
    2
    • S Offline
      S Offline
      SGaist
      Lifetime Qt Champion
      wrote on 1 Jul 2021, 17:40 last edited by
      #3

      Hi and welcome to devnet,

      You are looking for the QtSvg module and the QSvgWidget.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      1
      • M mrjj
        1 Jul 2021, 17:35

        Hi and welcome to the forums

        Well you need to add
        QT += svg
        to the profile. ( and run qmake after)

        https://doc.qt.io/qt-5/qtsvg-index.html

        Then you can use SVG in most places where you would use a .PNG

        Do you want to use them for icons or showing a big SVG on th screen or what is the goal ?

        S Offline
        S Offline
        Saviz
        wrote on 1 Jul 2021, 18:48 last edited by Saviz 7 Jan 2021, 18:58
        #4

        @mrjj

        Thank you, currently I want to display a big SVG. But I would also like to use it as an icon if I can. currently I want to display it in a QLabel. Just one more question. Is it really enough to include <QtSvg> and add Qt += svg to the qmake . pro file or do I have to create additional widgets and classes for it? What I mean by that is will this create some kind of property in each widget that will allow me to add SVG to it or do I have to create a special widget for it?

        M 2 Replies Last reply 1 Jul 2021, 18:54
        0
        • S Saviz
          1 Jul 2021, 18:48

          @mrjj

          Thank you, currently I want to display a big SVG. But I would also like to use it as an icon if I can. currently I want to display it in a QLabel. Just one more question. Is it really enough to include <QtSvg> and add Qt += svg to the qmake . pro file or do I have to create additional widgets and classes for it? What I mean by that is will this create some kind of property in each widget that will allow me to add SVG to it or do I have to create a special widget for it?

          M Offline
          M Offline
          mrjj
          Lifetime Qt Champion
          wrote on 1 Jul 2021, 18:54 last edited by
          #5

          @Saviz
          well you can show in a QLabel as you can do
          QPixmap pix("/path/test.svg")
          and then set that on the label

          BUT

          https://doc.qt.io/qt-5/qsvgwidget.html

          is much better for this as we can keep the SVG and not convert to pixmap.

          Yes you can also use it as Icon. QIcon also loads svgs.

          1 Reply Last reply
          1
          • S Saviz
            1 Jul 2021, 18:48

            @mrjj

            Thank you, currently I want to display a big SVG. But I would also like to use it as an icon if I can. currently I want to display it in a QLabel. Just one more question. Is it really enough to include <QtSvg> and add Qt += svg to the qmake . pro file or do I have to create additional widgets and classes for it? What I mean by that is will this create some kind of property in each widget that will allow me to add SVG to it or do I have to create a special widget for it?

            M Offline
            M Offline
            mrjj
            Lifetime Qt Champion
            wrote on 1 Jul 2021, 19:03 last edited by mrjj 7 Jan 2021, 19:07
            #6

            @Saviz

            Hi
            Here is fast sample to get you going
            https://www.dropbox.com/s/y9uy5wbnzicuqqb/mysvg.zip?dl=0

            alt text

            whoops. i btter add some comments :)

                QSvgWidget *svg = new QSvgWidget(this); // make the svg widget
                svg->load(QString(":/NewTux.svg")); // load svg file. make sure to change path in your app
                auto verticalLayout = new QVBoxLayout(centralWidget()); // make a layout to put the svgwidget it so it scales with the window
                verticalLayout->setContentsMargins(0, 0, 0, 0); // no borders
                verticalLayout->addWidget(svg);// the widget to it
                centralWidget()->setLayout(verticalLayout); // assign the layout to the mainwindow
            
            MainWindow is special as its center is actually another widget called central widget you gain access to with
            centralWidget() which we use instead of directly MainWindow it self.  This can be confusing at first.
            Just think of it as a place holder widget MainWindow has.
            
            
            S 2 Replies Last reply 1 Jul 2021, 19:04
            2
            • M mrjj
              1 Jul 2021, 19:03

              @Saviz

              Hi
              Here is fast sample to get you going
              https://www.dropbox.com/s/y9uy5wbnzicuqqb/mysvg.zip?dl=0

              alt text

              whoops. i btter add some comments :)

                  QSvgWidget *svg = new QSvgWidget(this); // make the svg widget
                  svg->load(QString(":/NewTux.svg")); // load svg file. make sure to change path in your app
                  auto verticalLayout = new QVBoxLayout(centralWidget()); // make a layout to put the svgwidget it so it scales with the window
                  verticalLayout->setContentsMargins(0, 0, 0, 0); // no borders
                  verticalLayout->addWidget(svg);// the widget to it
                  centralWidget()->setLayout(verticalLayout); // assign the layout to the mainwindow
              
              MainWindow is special as its center is actually another widget called central widget you gain access to with
              centralWidget() which we use instead of directly MainWindow it self.  This can be confusing at first.
              Just think of it as a place holder widget MainWindow has.
              
              
              S Offline
              S Offline
              Saviz
              wrote on 1 Jul 2021, 19:04 last edited by
              #7

              @mrjj

              Thank you, you are a life saver :D

              1 Reply Last reply
              0
              • M mrjj
                1 Jul 2021, 19:03

                @Saviz

                Hi
                Here is fast sample to get you going
                https://www.dropbox.com/s/y9uy5wbnzicuqqb/mysvg.zip?dl=0

                alt text

                whoops. i btter add some comments :)

                    QSvgWidget *svg = new QSvgWidget(this); // make the svg widget
                    svg->load(QString(":/NewTux.svg")); // load svg file. make sure to change path in your app
                    auto verticalLayout = new QVBoxLayout(centralWidget()); // make a layout to put the svgwidget it so it scales with the window
                    verticalLayout->setContentsMargins(0, 0, 0, 0); // no borders
                    verticalLayout->addWidget(svg);// the widget to it
                    centralWidget()->setLayout(verticalLayout); // assign the layout to the mainwindow
                
                MainWindow is special as its center is actually another widget called central widget you gain access to with
                centralWidget() which we use instead of directly MainWindow it self.  This can be confusing at first.
                Just think of it as a place holder widget MainWindow has.
                
                
                S Offline
                S Offline
                Saviz
                wrote on 2 Jul 2021, 11:18 last edited by Saviz 7 Feb 2021, 11:18
                #8

                @mrjj

                One question, I have done everything to the best of my abilities but I still get the error:
                "undefined reference to _imp_ZN10QSvgWidgetC1EP7QWidget"
                "undefined reference to _imp_ZN10QSvgWidget4loadERK7QString"

                Here is my code:

                qmake .pro:

                QT       += core gui
                QT       += sql
                
                
                greaterThan(QT_MAJOR_VERSION, 4): QT += widgets svg
                
                CONFIG += c++11
                
                # You can make your code fail to compile if it uses deprecated APIs.
                # In order to do so, uncomment the following line.
                #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
                
                SOURCES += \
                    main.cpp \
                    mainwindow.cpp
                
                HEADERS += \
                    mainwindow.h
                
                FORMS += \
                    mainwindow.ui
                
                # Default rules for deployment.
                qnx: target.path = /tmp/$${TARGET}/bin
                else: unix:!android: target.path = /opt/$${TARGET}/bin
                !isEmpty(target.path): INSTALLS += target
                
                RESOURCES += \
                   Resources.qrc
                

                mainwindow.cpp:

                #include "mainwindow.h"
                #include "ui_mainwindow.h"
                
                #include <QtSvgWidgets/QSvgWidget>
                #include <QtSvg>
                
                MainWindow::MainWindow(QWidget *parent)
                    : QMainWindow(parent)
                    , ui(new Ui::MainWindow)
                {
                    ui->setupUi(this);
                    QSvgWidget* svg = new QSvgWidget(this);
                    svg->load(QString(":/images/images/Dollar.svg"));
                
                
                    ui->verticalLayout_3->addWidget(svg);
                }
                
                MainWindow::~MainWindow()
                {
                    delete ui;
                }
                

                mainwindow.h:

                #ifndef MAINWINDOW_H
                #define MAINWINDOW_H
                
                #include <QMainWindow>
                
                QT_BEGIN_NAMESPACE
                namespace Ui { class MainWindow; }
                QT_END_NAMESPACE
                
                class MainWindow : public QMainWindow
                {
                    Q_OBJECT
                
                public:
                    MainWindow(QWidget *parent = nullptr);
                    ~MainWindow();
                
                private:
                    Ui::MainWindow *ui;
                };
                #endif
                

                main.cpp:

                #include "mainwindow.h"
                
                #include <QApplication>
                
                int main(int argc, char *argv[])
                {
                    QApplication a(argc, argv);
                    MainWindow w;
                    w.show();
                    return a.exec();
                }
                

                (PS: I tried to add [include<QtSvgWidget>] but it doesn't exist by it's own. It is rather inside the "QtSvgWidgtes/QtSvgWidget")

                J 1 Reply Last reply 2 Jul 2021, 11:21
                0
                • S Saviz
                  2 Jul 2021, 11:18

                  @mrjj

                  One question, I have done everything to the best of my abilities but I still get the error:
                  "undefined reference to _imp_ZN10QSvgWidgetC1EP7QWidget"
                  "undefined reference to _imp_ZN10QSvgWidget4loadERK7QString"

                  Here is my code:

                  qmake .pro:

                  QT       += core gui
                  QT       += sql
                  
                  
                  greaterThan(QT_MAJOR_VERSION, 4): QT += widgets svg
                  
                  CONFIG += c++11
                  
                  # You can make your code fail to compile if it uses deprecated APIs.
                  # In order to do so, uncomment the following line.
                  #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
                  
                  SOURCES += \
                      main.cpp \
                      mainwindow.cpp
                  
                  HEADERS += \
                      mainwindow.h
                  
                  FORMS += \
                      mainwindow.ui
                  
                  # Default rules for deployment.
                  qnx: target.path = /tmp/$${TARGET}/bin
                  else: unix:!android: target.path = /opt/$${TARGET}/bin
                  !isEmpty(target.path): INSTALLS += target
                  
                  RESOURCES += \
                     Resources.qrc
                  

                  mainwindow.cpp:

                  #include "mainwindow.h"
                  #include "ui_mainwindow.h"
                  
                  #include <QtSvgWidgets/QSvgWidget>
                  #include <QtSvg>
                  
                  MainWindow::MainWindow(QWidget *parent)
                      : QMainWindow(parent)
                      , ui(new Ui::MainWindow)
                  {
                      ui->setupUi(this);
                      QSvgWidget* svg = new QSvgWidget(this);
                      svg->load(QString(":/images/images/Dollar.svg"));
                  
                  
                      ui->verticalLayout_3->addWidget(svg);
                  }
                  
                  MainWindow::~MainWindow()
                  {
                      delete ui;
                  }
                  

                  mainwindow.h:

                  #ifndef MAINWINDOW_H
                  #define MAINWINDOW_H
                  
                  #include <QMainWindow>
                  
                  QT_BEGIN_NAMESPACE
                  namespace Ui { class MainWindow; }
                  QT_END_NAMESPACE
                  
                  class MainWindow : public QMainWindow
                  {
                      Q_OBJECT
                  
                  public:
                      MainWindow(QWidget *parent = nullptr);
                      ~MainWindow();
                  
                  private:
                      Ui::MainWindow *ui;
                  };
                  #endif
                  

                  main.cpp:

                  #include "mainwindow.h"
                  
                  #include <QApplication>
                  
                  int main(int argc, char *argv[])
                  {
                      QApplication a(argc, argv);
                      MainWindow w;
                      w.show();
                      return a.exec();
                  }
                  

                  (PS: I tried to add [include<QtSvgWidget>] but it doesn't exist by it's own. It is rather inside the "QtSvgWidgtes/QtSvgWidget")

                  J Offline
                  J Offline
                  jsulm
                  Lifetime Qt Champion
                  wrote on 2 Jul 2021, 11:21 last edited by jsulm 7 Feb 2021, 11:22
                  #9

                  @Saviz Where is "QT += svg" in your pro file?

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

                  S 1 Reply Last reply 2 Jul 2021, 11:48
                  2
                  • J jsulm
                    2 Jul 2021, 11:21

                    @Saviz Where is "QT += svg" in your pro file?

                    S Offline
                    S Offline
                    Saviz
                    wrote on 2 Jul 2021, 11:48 last edited by
                    #10

                    @jsulm

                    In the qmake .pro file that @mrjj kindly shared, in front of the "greaterThan(QT_MAJOR_VERSION, 4):" there was "QT += widgets svg" and that is what I did. I also tried adding the "QT += svg" to the top, but that did not do the trick.

                    M 1 Reply Last reply 2 Jul 2021, 12:05
                    0
                    • S Offline
                      S Offline
                      SGaist
                      Lifetime Qt Champion
                      wrote on 2 Jul 2021, 12:02 last edited by
                      #11

                      Which version of Qt are you currently using ?

                      Interested in AI ? www.idiap.ch
                      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                      S 1 Reply Last reply 2 Jul 2021, 16:27
                      1
                      • S Saviz
                        2 Jul 2021, 11:48

                        @jsulm

                        In the qmake .pro file that @mrjj kindly shared, in front of the "greaterThan(QT_MAJOR_VERSION, 4):" there was "QT += widgets svg" and that is what I did. I also tried adding the "QT += svg" to the top, but that did not do the trick.

                        M Offline
                        M Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 2 Jul 2021, 12:05 last edited by
                        #12

                        @Saviz

                        Hi
                        it should work unless really old Qt.

                        Could you try in build menu to use Clean all, run qmake and then press the run ?

                        S 1 Reply Last reply 2 Jul 2021, 17:30
                        0
                        • S SGaist
                          2 Jul 2021, 12:02

                          Which version of Qt are you currently using ?

                          S Offline
                          S Offline
                          Saviz
                          wrote on 2 Jul 2021, 16:27 last edited by Saviz 7 Feb 2021, 16:34
                          #13

                          @SGaist

                          Qt version 4.14.2 (That is what it says in the "About")

                          I don't understand something, I just recently downloaded Qt. When I downloaded Qt I selected the Qt 6 version but now as you told me to look at the version it says 4.14,2. What is going on I am very confused. Did I make a mistake in the download process?

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            SGaist
                            Lifetime Qt Champion
                            wrote on 2 Jul 2021, 16:47 last edited by
                            #14

                            No that's the Qt Creator version. There's no Qt 4.14.

                            You have to take a look at the kit you are using.

                            Interested in AI ? www.idiap.ch
                            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                            S 1 Reply Last reply 2 Jul 2021, 16:50
                            0
                            • S SGaist
                              2 Jul 2021, 16:47

                              No that's the Qt Creator version. There's no Qt 4.14.

                              You have to take a look at the kit you are using.

                              S Offline
                              S Offline
                              Saviz
                              wrote on 2 Jul 2021, 16:50 last edited by
                              #15

                              @SGaist

                              I took a look at the kit as you instructed.

                              The kit version is: Qt 6.0.3 64bit

                              1 Reply Last reply
                              0
                              • J Offline
                                J Offline
                                JoeCFD
                                wrote on 2 Jul 2021, 17:07 last edited by JoeCFD 7 Feb 2021, 17:16
                                #16

                                It was introduced from 4.1.
                                https://doc.qt.io/qt-5/qsvgwidget.html
                                QT += core gui widgets svg <=== you need widgets as well for qsvgwidget

                                If you simply need a QPixmap from a svg source for other widgets, use QSvgRenderer to paint one.

                                1 Reply Last reply
                                0
                                • M mrjj
                                  2 Jul 2021, 12:05

                                  @Saviz

                                  Hi
                                  it should work unless really old Qt.

                                  Could you try in build menu to use Clean all, run qmake and then press the run ?

                                  S Offline
                                  S Offline
                                  Saviz
                                  wrote on 2 Jul 2021, 17:30 last edited by Saviz 7 Feb 2021, 17:30
                                  #17

                                  @mrjj

                                  I tried doing what you suggested. Unfortunately it didn't work.

                                  I first cleaned the project and then ran qmake but I still get the same errors.
                                  Maybe I am doing something else wrong? (Like not including something?)

                                  J 1 Reply Last reply 2 Jul 2021, 17:44
                                  0
                                  • S Saviz
                                    2 Jul 2021, 17:30

                                    @mrjj

                                    I tried doing what you suggested. Unfortunately it didn't work.

                                    I first cleaned the project and then ran qmake but I still get the same errors.
                                    Maybe I am doing something else wrong? (Like not including something?)

                                    J Offline
                                    J Offline
                                    JoeCFD
                                    wrote on 2 Jul 2021, 17:44 last edited by JoeCFD 7 Feb 2021, 17:47
                                    #18

                                    @Saviz CONFIG += c++17 you also need 17 for Qt 6.
                                    Show this line of your Makefile:
                                    LIBS = $(SUBLIBS)
                                    it should have -lQt5Svg

                                    S 1 Reply Last reply 3 Jul 2021, 04:30
                                    0
                                    • S Offline
                                      S Offline
                                      SGaist
                                      Lifetime Qt Champion
                                      wrote on 2 Jul 2021, 18:02 last edited by
                                      #19

                                      Drop the C++ CONFIG, you do not need that currently.

                                      You should also consider updating to the latest Qt 6.1.

                                      Interested in AI ? www.idiap.ch
                                      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                                      1 Reply Last reply
                                      0
                                      • J Offline
                                        J Offline
                                        JoeCFD
                                        wrote on 2 Jul 2021, 18:14 last edited by JoeCFD 7 Feb 2021, 18:29
                                        #20

                                        @Saviz Another possibility is svg is not installed. Run MaintenaceTool to add it. I just installed Qt 6.1.2 in which svg is included. If you can find it in the Qt lib dir, check the path settings for Qt.

                                        S 1 Reply Last reply 3 Jul 2021, 05:03
                                        0
                                        • J JoeCFD
                                          2 Jul 2021, 17:44

                                          @Saviz CONFIG += c++17 you also need 17 for Qt 6.
                                          Show this line of your Makefile:
                                          LIBS = $(SUBLIBS)
                                          it should have -lQt5Svg

                                          S Offline
                                          S Offline
                                          Saviz
                                          wrote on 3 Jul 2021, 04:30 last edited by Saviz 7 Mar 2021, 04:31
                                          #21

                                          @JoeCFD

                                          I don't see this line in my qmake file. Maybe that is the reason it doesn't work. Should I add it?

                                          1 Reply Last reply
                                          0

                                          11/33

                                          2 Jul 2021, 12:02

                                          topic:navigator.unread, 22
                                          • Login

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