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

How to use SVG

Scheduled Pinned Locked Moved Unsolved General and Desktop
svgiconwidget
33 Posts 7 Posters 16.8k 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.
  • mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on 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 ?

    SavizS 1 Reply Last reply
    2
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on 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
      • mrjjM mrjj

        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 ?

        SavizS Offline
        SavizS Offline
        Saviz
        wrote on last edited by Saviz
        #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?

        mrjjM 2 Replies Last reply
        0
        • SavizS Saviz

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

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on 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
          • SavizS Saviz

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

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by mrjj
            #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.
            
            
            SavizS 2 Replies Last reply
            2
            • mrjjM mrjj

              @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.
              
              
              SavizS Offline
              SavizS Offline
              Saviz
              wrote on last edited by
              #7

              @mrjj

              Thank you, you are a life saver :D

              1 Reply Last reply
              0
              • mrjjM mrjj

                @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.
                
                
                SavizS Offline
                SavizS Offline
                Saviz
                wrote on last edited by Saviz
                #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")

                jsulmJ 1 Reply Last reply
                0
                • SavizS Saviz

                  @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")

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

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

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

                  SavizS 1 Reply Last reply
                  2
                  • jsulmJ jsulm

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

                    SavizS Offline
                    SavizS Offline
                    Saviz
                    wrote on 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.

                    mrjjM 1 Reply Last reply
                    0
                    • SGaistS Offline
                      SGaistS Offline
                      SGaist
                      Lifetime Qt Champion
                      wrote on 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

                      SavizS 1 Reply Last reply
                      1
                      • SavizS Saviz

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

                        mrjjM Offline
                        mrjjM Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 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 ?

                        SavizS 1 Reply Last reply
                        0
                        • SGaistS SGaist

                          Which version of Qt are you currently using ?

                          SavizS Offline
                          SavizS Offline
                          Saviz
                          wrote on last edited by Saviz
                          #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
                          • SGaistS Offline
                            SGaistS Offline
                            SGaist
                            Lifetime Qt Champion
                            wrote on 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

                            SavizS 1 Reply Last reply
                            0
                            • SGaistS SGaist

                              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.

                              SavizS Offline
                              SavizS Offline
                              Saviz
                              wrote on 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
                              • JoeCFDJ Offline
                                JoeCFDJ Offline
                                JoeCFD
                                wrote on last edited by JoeCFD
                                #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
                                • mrjjM mrjj

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

                                  SavizS Offline
                                  SavizS Offline
                                  Saviz
                                  wrote on last edited by Saviz
                                  #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?)

                                  JoeCFDJ 1 Reply Last reply
                                  0
                                  • SavizS Saviz

                                    @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?)

                                    JoeCFDJ Offline
                                    JoeCFDJ Offline
                                    JoeCFD
                                    wrote on last edited by JoeCFD
                                    #18

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

                                    SavizS 1 Reply Last reply
                                    0
                                    • SGaistS Offline
                                      SGaistS Offline
                                      SGaist
                                      Lifetime Qt Champion
                                      wrote on 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
                                      • JoeCFDJ Offline
                                        JoeCFDJ Offline
                                        JoeCFD
                                        wrote on last edited by JoeCFD
                                        #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.

                                        SavizS 1 Reply Last reply
                                        0
                                        • JoeCFDJ JoeCFD

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

                                          SavizS Offline
                                          SavizS Offline
                                          Saviz
                                          wrote on last edited by Saviz
                                          #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

                                          • Login

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