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 Updated to NodeBB v4.3 + New Features

How to use SVG

Scheduled Pinned Locked Moved Unsolved General and Desktop
svgiconwidget
33 Posts 7 Posters 17.9k Views 2 Watching
  • 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 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
                                      • J JoeCFD
                                        2 Jul 2021, 18:14

                                        @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 Offline
                                        S Offline
                                        Saviz
                                        wrote on 3 Jul 2021, 05:03 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?

                                        M 1 Reply Last reply 3 Jul 2021, 05:12
                                        0
                                        • S Saviz
                                          3 Jul 2021, 05:03

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

                                          M Offline
                                          M Offline
                                          mrjj
                                          Lifetime Qt Champion
                                          wrote on 3 Jul 2021, 05:12 last edited by mrjj 7 Mar 2021, 05:13
                                          #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

                                          S 1 Reply Last reply 3 Jul 2021, 05:43
                                          0

                                          13/33

                                          2 Jul 2021, 16:27

                                          • Login

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