How to do it…

Let's learn how to create a simple program that displays SVG graphics onscreen:

1. First of all, let's create a menu bar by right-clicking the main window widget on the hierarchy window and selecting the Create Menu Bar option from the pop-up menu. After that, add a File option to the menu bar and a Save as SVG action underneath it:

2. After that, you will see an item called actionSave_as_SVG in the Action Editor window at the bottom of the Qt Creator window. Right-click on the item and choose Go to slot… from the pop-up menu. A window will now appear, which carries a list of slots available for the particular action. Choose the default signal, called triggered(), and click the OK button:

3. Once you have clicked the OK button, Qt Creator will switch over to the script editor. You will realize that a slot called on_actionSave_as_SVG_triggered() has been automatically added to your main window class. At the bottom of your mainwindow.h file, you will see something like this:

void MainWindow::on_actionSave_as_SVG_triggered() {}

4. The preceding function will be called when you clicked on the Save as SVG option from the menu bar. We will write our code within this function to save all the vector graphics into an SVG file. To do that, we need to first of all include a class header called QSvgGenerator at the top of our source file. This header is very important as it's required for generating SVG files. Then, we also need to include another class header called QFileDialog, which will be used to open the save dialog:

#include <QtSvg/QSvgGenerator>
#include <QFileDialog>

5. We also need to add the svg module to our project file, like so:

QT += core gui svg

6. Then, create a new function called paintAll() within the mainwindow.h file, as shown in the following code:

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    virtual void paintEvent(QPaintEvent *event);
    void paintAll(QSvgGenerator *generator = 0);

7. After that, in the mainwindow.cpp file, move all the code from paintEvent() to the paintAll() function. Then, replace all the individual QPainter objects with a single, unified QPainter for drawing all the graphics. Also, call the begin() function before drawing anything and call the end() function after finishing drawing. The code should look like this:

void MainWindow::paintAll(QSvgGenerator *generator) {
    QPainter painter;
    if (engine)
        painter.begin(engine);
    else
        painter.begin(this);
    painter.setFont(QFont("Times", 14, QFont::Bold));
    painter.drawText(QPoint(20, 30), "Testing");
    painter.drawLine(QPoint(50, 60), QPoint(100, 100));
    painter.setBrush(Qt::BDiagPattern);
    painter.drawRect(QRect(40, 120, 80, 30));

8. We go on to create ellipsePen and rectPath:

    QPen ellipsePen;
    ellipsePen.setColor(Qt::red);
    ellipsePen.setStyle(Qt::DashDotLine);
    painter.setPen(ellipsePen);
    painter.drawEllipse(QPoint(80, 200), 50, 20);

    QPainterPath rectPath;
    rectPath.addRect(QRect(150, 20, 100, 50));
    painter.setPen(QPen(Qt::red, 1, Qt::DashDotLine, Qt::FlatCap, Qt::MiterJoin));
    painter.setBrush(Qt::yellow);
    painter.drawPath(rectPath);

9. Then, we go on to create ellipsePath and image:

    QPainterPath ellipsePath;
    ellipsePath.addEllipse(QPoint(200, 120), 50, 20);
    painter.setPen(QPen(QColor(79, 106, 25), 5, Qt::SolidLine, Qt::FlatCap, Qt::MiterJoin));
    painter.setBrush(QColor(122, 163, 39));
    painter.drawPath(ellipsePath);

    QImage image;
    image.load("tux.png");
    painter.drawImage(QPoint(100, 150), image);
    painter.end();
}

10. Since we have moved all the code from paintEvent() to paintAll(), we shall now call the paintAll() function inside paintEvent(), like so:

void MainWindow::paintEvent(QPaintEvent *event) {
    paintAll();
}

11. Then, we will write the code for exporting the graphics as an SVG file. The code will be written inside the slot function called on_actionSave_as_SVG_triggered(), which was generated by Qt. We start by calling the save file dialog and obtain the directory path with the desired filename from the user:

void MainWindow::on_actionSave_as_SVG_triggered() {
    QString filePath = QFileDialog::getSaveFileName(this, "Save SVG", "", "SVG files (*.svg)");
    if (filePath == "")
        return;
}

12. After that, create a QSvgGenerator object and save the graphics to an SVG file by passing the QSvgGenerator object to the paintAll() function:

void MainWindow::on_actionSave_as_SVG_triggered() {
    QString filePath = QFileDialog::getSaveFileName(this, "Save SVG", "", "SVG files (*.svg)");
    if (filePath == "")
        return;
    QSvgGenerator generator;
    generator.setFileName(filePath);
    generator.setSize(QSize(this->width(), this->height()));
    generator.setViewBox(QRect(0, 0, this->width(), this->height()));
    generator.setTitle("SVG Example");
    generator.setDescription("This SVG file is generated by Qt.");
    paintAll(&generator);
 }

13. Compile and run the program now and you should be able to export the graphics by going to File | Save as SVG: