Qt开发技术：QtSVG介绍、使用和Demo_qt svg

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Qt开发专栏：开发技术（点击传送门）

红胖子，来也！

Qt的SVG介绍、基本使用和Demo演示。

Demo1：QSvgGenerator

保存后的SVG文件为：

Demo2：QSvgRenderer

Demo3：QSvgWidget

Qt SVG

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形描述语言。Qt提供了用于在小部件和其他绘制设备中呈现和显示SVG图形的类。

Qt SVG提供了用于呈现SVG文件的类。要包含模块类的定义，请使用以下指令：

#include <QtSvg>

要链接到模块，请将此行添加到qmake.pro文件中：

QT += svg

许可证和属性

Qt SVG在Qt公司的商业许可下可用。此外，它还可以在GNU Lesser General Public License（第3版）或GNU General Public License（第2版）下使用。有关更多详细信息，请参阅Qt许可。

此外，Qt SVG在以下许可证下包含第三方代码。

XSVG许可

渲染SVG文件

可缩放矢量图形（SVG）是一种用XML描述二维图形和图形应用的语言。

SVG 1.1是W3C的推荐标准，它构成了Qt中当前SVG开发的核心。

SVG 1.2是SVG工作组目前正在开发的规范，它以草稿的形式提供。移动SVG配置文件（SVG Basic和SVG Tiny）针对资源有限的设备，是第三代移动电话3GPP平台的一部分。您可以在about SVG上阅读有关SVG的更多信息。

Qt支持SVG 1.2tiny的静态特性。目前不支持ECMA脚本和DOM操作。

SVG图形可以呈现到任何QPaintDevice子类上。这种方法使开发人员能够灵活地进行测试，以便为每个应用程序找到最佳解决方案。

呈现SVG文件的最简单方法是构造一个QSvgWidget并使用 QSvgWidget::load() 函数之一加载一个SVG文件。

QSvgRenderer是负责为QSvgWidget呈现SVG文件的类，它可以直接用于为自定义小部件提供SVG支持。若要加载SVG文件，请使用文件名或文件内容构造一个QSvgRenderer，或在现有渲染器上调用 QSvgRenderer::load() 。如果成功加载SVG文件， QSvgRenderer::isValid() 将返回true。

成功加载SVG文件后，可以使用 QSvgRenderer::render() 函数呈现它。注意，此方案允许您在Qt支持的所有绘画设备上呈现SVG文件，包括QWidget、QGLWidget和QImage。

Qt SVG相关类

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形描述语言。Qt提供了用于在小部件和其他绘制设备中呈现和显示SVG图形的类。

序号	类	描述
1	QGraphicsSvgItem	QGraphicsItem，可用于呈现SVG文件的内容，可以细化拆分Svg的元素
2	QSvgGenerator	用于创建 SVG 图形的绘制设备，主要用于保存的时候使用，注意保存到时候直接使用局部变量即可，使用全局变量其没有析构反倒不会保存
3	QSvgRenderer	用于将SVG文件的内容绘制到绘图设备上，其是打开svg将其渲染到QPixmap等上面
4	QSvgWidget	用于显示可缩放矢量图形（ SVG ）文件内容的小部件，直接加载 svg 文件，即可显示

QGraphicsSvgItem

QGraphicsSvgItem 类是一个 QGraphicsItem ，可用于呈现SVG文件的内容。

QGraphicsSvgItem 提供了一种在 QGraphicsView 上呈现SVG文件的方法。QGraphicsSvgItem可以通过将要呈现的SVG文件传递给其构造函数或通过在其上显式设置共享的 QSvgRenderer 来创建。

请注意，在QGraphicsSvgItem上设置QSvgRenderer不会使项获得呈现器的所有权，因此， 如果使用 setSharedRenderer() 方法，则必须确保QSvgRenderer 对象的生存期至少与QGraphicsSvgItem 的生存期相同。

QGraphicsSvgItem 提供了一种通过setElementId 只呈现部分SVG 文件的方法。 如果调用 setElementId() 方法，则只有具有传递的id的SVG元素（及其子元素）将是呈现器。这为有选择地呈现包含许多离散元素的大型SVG文件提供了一种方便的方法。例如，以下代码仅呈现包含整个卡片组的SVG文件中的小丑：

QSvgRenderer *renderer = new QSvgRenderer(QLatin1String("SvgCardDeck.svg"));
QGraphicsSvgItem *black = new QGraphicsSvgItem();
QGraphicsSvgItem *red = new QGraphicsSvgItem();
black->setSharedRenderer(renderer);
black->setElementId(QLatin1String("black_joker"));
red->setSharedRenderer(renderer);
red->setElementId(QLatin1String("red_joker"));
项目的大小可以通过直接操作项目转换矩阵来设置。 
默认情况下，使用QGraphicsItem::DeviceCoordinateCache模式缓存SVG呈现，以加快项目的显示速度。通过将QGraphicsItem::NoCache传递给QGraphicsItem::setCacheMode()方法，可以禁用缓存。 
QSvgGenerator 
QSvgGenerator类提供了一个用于创建SVG图形的绘制设备。 
此绘制设备表示可缩放矢量图形（SVG）绘图。像QPrinter一样，它被设计成一个只写的设备，生成特定格式的输出。 
要编写SVG文件，首先需要通过设置文件名或outputDevice属性来配置输出。通常需要通过设置“大小”特性来指定图形的大小，在某些情况下，如果图形将包含在另一个图形中，则还需要设置“viewBox”特性。 
QSvgGenerator generator;
generator.setFileName(path);
generator.setSize(QSize(200, 200));
generator.setViewBox(QRect(0, 0, 200, 200));
generator.setTitle(tr("SVG Generator Example Drawing"));
generator.setDescription(tr("An SVG drawing created by the SVG Generator "
                       "Example provided with Qt."));
其他元数据可以通过设置标题、描述和分辨率属性来指定。 
与其他QPaintDevice子类一样，QPainter对象用于绘制此类的实例： 
// 无需在paintEvent函数中
QPainter painter;
painter.begin(&generator);
// 此处绘制的内容就是保存为svg文件的内容
painter.end();
绘制方式与其他绘制设备相同。但是，必须使用QPainter::begin()和end()在设备上显式地开始和结束绘制。 
测试Demo1 
void SVGShow3Widget::on_pushButton_saveAs_clicked()
    QString filePath = QFileDialog::getSaveFileName(0, "打开文件", ".", "SVG(*.svg)");
    if(filePath.isEmpty())
        return;
    QSvgGenerator svgGenerator;
    svgGenerator.setFileName(filePath);
    svgGenerator.setSize(QSize(rect().width(), rect().height()));
    svgGenerator.setViewBox(rect());
    svgGenerator.setTitle("测试QSvgGenerator");
    svgGenerator.setDescription("另存为绘制测试");
    QPainter painter;
    painter.begin(&svgGenerator);
    painter.setPen(Qt::red);
    painter.drawPixmap(rect(), _pixmapSvg);
    painter.drawText(rect(), "红胖子测试Svg");
    painter.end();
QSvgRenderer 
QSvgRenderer类用于将SVG文件的内容绘制到绘制设备上。 
使用QSvgRenderer，可缩放矢量图形（SVG）可以呈现到任何QPaintDevice子类上，包括QWidget、QImage和QGLWidget。 
QSvgRenderer提供了一个API，它支持SVG呈现的基本特性，比如加载和呈现静态图形，以及更多的交互特性，比如动画。由于渲染是使用QPainter执行的，因此可以在QPaintDevice的任何子类上渲染SVG图形。 
SVG图形可以在构造QSvgRenderer时加载，也可以稍后使用load()函数加载。数据可以直接作为序列化XML提供，也可以间接使用文件名提供。如果加载了有效的文件，则无论是在构造呈现器时还是以后某个时间，isValid()都将返回true；否则将返回false。QSvgRenderer提供render()插槽，用于使用给定的绘制器渲染当前文档或动画文档的当前帧。 
函数的作用是：提供有关呈现当前加载的SVG文件所需的空间量的信息。这对于绘制设备（如QWidget）非常有用，这些设备通常需要向其父布局提供大小提示。图形的默认大小可能与其使用viewBox特性找到的可见区域不同。 
支持动画SVG图形，可以通过简单的函数和属性集合进行控制： 
animated()函数：指示图形是否包含动画信息；
framesPerSecond属性：包含播放动画的速率； 
最后，QSvgRenderer类提供repainNeeded()信号，该信号在文档呈现需要更新时发出。 
测试Demo2 
SVGShow2Widget.h 
#ifndef SVGSHOW2WIDGET_H
#define SVGSHOW2WIDGET_H
#include <QWidget>
#include <QSvgRenderer>
namespace Ui {
class SVGShow2Widget;
class SVGShow2Widget : public QWidget
    Q_OBJECT
public:
    explicit SVGShow2Widget(QWidget *parent = 0);
    ~SVGShow2Widget();
protected:
    void paintEvent(QPaintEvent *event);
private slots:
    void on_pushButton_openFile_clicked();
    void on_pushButton_load_clicked();
private:
    Ui::SVGShow2Widget *ui;
    QPixmap _pixmap;
    QPixmap _pixmapSvg;
    QSvgRenderer *_pSvgRenderer;
#endif // SVGSHOW2WIDGET_H
SVGShow2Widget.cpp
#include "SVGShow2Widget.h"
#include "ui_SVGShow2Widget.h"
#include <QFileDialog>
#include <QPainter>
#include <QDebug>
SVGShow2Widget::SVGShow2Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SVGShow2Widget),
    _pSvgRenderer(0)
    ui->setupUi(this);
    QString version = "v1.0.0";
    setWindowTitle(QString("使用QSvgRenderer加载svgDemo %1 (作者：红模仿(红胖子) QQ：21497936 博客地址: blog.csdn.net/qq21497936").arg(version));
    _pixmap.load(":/images/1.png");
    _pSvgRenderer = new QSvgRenderer(this);
    _pSvgRenderer->load(QString(":/images/2.svg"));
SVGShow2Widget::~SVGShow2Widget()
    delete ui;
void SVGShow2Widget::paintEvent(QPaintEvent *event)
    QPainter painter(this);
    painter.drawPixmap(ui->label_png->geometry(), _pixmap);
    _pixmapSvg = QPixmap(ui->label_svg->width(), ui->label_svg->height());
    _pixmapSvg.fill(Qt::white);
    QPainter painter2(&_pixmapSvg);
    _pSvgRenderer->render(&painter2, _pixmapSvg.rect());
    painter.drawPixmap(ui->label_svg->geometry(), _pixmapSvg);
void SVGShow2Widget::on_pushButton_openFile_clicked()
    QString filePath = QFileDialog::getOpenFileName(0, "打开文件", ".", "SVG(*.svg)");
    if(filePath.isEmpty())
        return;
    ui->lineEdit_path->setText(filePath);
void SVGShow2Widget::on_pushButton_load_clicked()
    _pSvgRenderer->load(ui->lineEdit_path->text());
    update();
QSvgWidget 
      QSvgWidget类提供了一个小部件，用于显示可缩放矢量图形（SVG）文件的内容。 
这个类使开发人员能够将SVG图形与标准小部件一起显示，并且使用的方式与QLabel用于显示文本和位图图像的方式基本相同。 
由于QSvgWidget是QWidget的一个子类，SVG图形是使用显示的属性呈现的。使用QSvgRenderer类可以对渲染过程进行更多的控制，因为这可以用于在其他绘制设备（如QImage和QGLWidget）上绘制。小部件使用的渲染器可以通过renderer()函数获得。 
每个QSvgWidget都可以用SVG文件的文件名构造，也可以在没有要呈现的特定文件的情况下构造，并且可以在以后提供一个。load()函数提供了两种加载SVG文件的不同方法：它们接受SVG文件的文件名或包含SVG文件的序列化XML表示形式的QByteArray。 
默认情况下，小部件提供大小提示以反映其显示的图形的大小。如果没有加载数据，小部件将提供默认的QWidget大小提示。如果需要自定义此行为，请子类化此类并重新实现sizeHint()。 
测试Demo3 
MySvgWidget.h 
#ifndef MYSVGWIDGET_H
#define MYSVGWIDGET_H
#include <QWidget>
#include <QSvgWidget>
#include <QSvgRenderer>
namespace Ui {
class MySvgWidget;
class MySvgWidget : public QWidget
    Q_OBJECT
public:
    explicit MySvgWidget(QWidget *parent = 0);
    ~MySvgWidget();
public:
    void load(const QString &file);
protected:
    void resizeEvent(QResizeEvent *event);
private:
    Ui::MySvgWidget *ui;
private:
    QString _filePath;
    QSvgWidget *_pSvgWidget;
    QSvgRenderer *_pSvgRenderer;
#endif // MYSVGWIDGET_H
MySvgWidget.cpp 
#include "MySvgWidget.h"
#include "ui_MySvgWidget.h"
#include <QDebug>
MySvgWidget::MySvgWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MySvgWidget),
    _pSvgWidget(0),
    _pSvgRenderer(0)
    ui->setupUi(this);
    _pSvgWidget = new QSvgWidget(this);
    _pSvgRenderer = _pSvgWidget->renderer();
MySvgWidget::~MySvgWidget()
    delete ui;
void MySvgWidget::load(const QString &file)
    _filePath = file;
    _pSvgWidget->load(_filePath);
    _pSvgWidget->repaint();
    update();
void MySvgWidget::resizeEvent(QResizeEvent *event)
    if(_pSvgWidget)
        _pSvgWidget->setGeometry(rect());
工程模板v1.0.0 
      工程模板v1.0.0：3个demo子工程打包 
下载工程模板 
CSDN：https://download.csdn.net/download/qq21497936/12328539 
QQ群：1047134658（点击“文件”搜索“qtSVGDemo”，群内与博文同步更新所有可开源的源码模板） 
原博主博客地址：https://blog.csdn.net/qq21497936
 原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
 本文章博客地址：https://blog.csdn.net/qq21497936/article/details/105537292
                    若该文为原创文章，未经允许不得转载原博主博客地址：https://blog.csdn.net/qq21497936原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062本文章博客地址：各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究目录前话DemoDemo1：QSvgGene...