How to use SVG

SGaist

Hi and welcome to devnet,

You are looking for the QtSvg module and the QSvgWidget.

Saviz

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?

mrjj

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

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.

Saviz

@mrjj

Thank you, you are a life saver :D

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

jsulm

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

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.

SGaist

Which version of Qt are you currently using ?

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 ?

Saviz

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

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.

Saviz

@SGaist

I took a look at the kit as you instructed.

The kit version is: Qt 6.0.3 64bit

JoeCFD

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.

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

JoeCFD

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

SGaist

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

You should also consider updating to the latest Qt 6.1.

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.

Saviz

@JoeCFD

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

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?