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 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
                                      • JoeCFDJ JoeCFD

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

                                        @JoeCFD said in How to use SVG:

                                        MaintenaceTool

                                        If I want to only install the SVG components, then what component do I have to select in the MaintenaceTool to install?

                                        mrjjM 1 Reply Last reply
                                        0
                                        • SavizS Saviz

                                          @JoeCFD said in How to use SVG:

                                          MaintenaceTool

                                          If I want to only install the SVG components, then what component do I have to select in the MaintenaceTool to install?

                                          mrjjM Offline
                                          mrjjM Offline
                                          mrjj
                                          Lifetime Qt Champion
                                          wrote on last edited by mrjj
                                          #23

                                          @Saviz

                                          Hi

                                          It should be included in any of the installer options. Its not a standalone option.

                                          I don't have Qt6 to test with.

                                          So the project I linked cannot run under Qt6 ?

                                          complains about svg ?

                                          Try install the Qt 6.1.2 as @JoeCFD suggests

                                          SavizS 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