Rendering SVG Files

Rendering SVG files with the Qt SVG module

SVG drawings can be rendered onto any QPaintDevice subclass, such as QWidget or QImage. The easiest way to render SVG files is to use QSvgWidget or QSvgRenderer .

Using QSvgWidget

QSvgWidget provides a convenient widget for displaying SVG files.

#include <QApplication>
#include <QSvgWidget>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QSvgWidget svgWidget(QStringLiteral(":/images/example.svg"));
    svgWidget.setGeometry(100, 100, 400, 400);
    svgWidget.show();
    return app.exec();
}

You can also load an SVG file after construction:

#include <QApplication>
#include <QSvgWidget>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QSvgWidget *svgWidget = new QSvgWidget;
    svgWidget->load(QStringLiteral(":/images/example.svg"));
    svgWidget->show();
    return app.exec();
}

Using QSvgRenderer

Use QSvgRenderer to render SVG content onto any QPaintDevice.

#include <QApplication>
#include <QSvgRenderer>
#include <QImage>
#include <QPainter>
#include <QLabel>
#include <QPixmap>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QSvgRenderer renderer(QStringLiteral(":/images/example.svg"));
    if (renderer.isValid()) {
        QImage image(400, 400, QImage::Format_ARGB32_Premultiplied);
        image.fill(Qt::transparent);
        QPainter painter(&image);
        renderer.render(&painter);

        QLabel label;
        label.setPixmap(QPixmap::fromImage(image));
        label.resize(400, 400);
        label.show();
        return app.exec();
    }
    return 1;
}

You can also use QSvgRenderer to render SVG directly in a custom widget’s paint event:

// In your widget's header file:
#include <QSvgRenderer>

class MyWidget : public QWidget
{
    Q_OBJECT
public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent), renderer(QStringLiteral(":/images/example.svg")) {}

protected:
    void paintEvent(QPaintEvent *) override {
        QPainter painter(this);
        renderer.render(&painter);
    }

private:
    QSvgRenderer renderer;
};

These approaches allow you to render SVG files on all paint devices supported by Qt, including QWidget and QImage.

Rendering options

QSvgRenderer provides rendering options via the Option enum. These options let you control how SVG files are parsed and rendered.

Rendering animated SVG files

The Qt SVG module supports rendering animated SVG files. Refer to the QSvgRenderer class documentation for details on how to work with animated SVGs.