How to use SVG

Saviz

Hello,

I am very sorry but I am a beginner and I am having a hard time trying to figure out how to use SVG instead of normal PNG images. I want to do this because I don't want to loose quality when resizing to different resolutions. But I don't know how to do this. I have visited different tutorials and documentations. But there is so much information that I don't know what to do or where to start. Is there a widget of some kind that I can use to show SVG? Or do I have to include some code to make this happen?

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 ?

SGaist

Hi and welcome to devnet,

You are looking for the QtSvg module and the QSvgWidget.

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?

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.