Qt之SVG：Qt简单使用SVG的介绍

一、SVG 是什么？

可伸缩矢量图形（SVG）是一种基于XML的语言，用于描述二维矢量图形。

如下面这个简单表示圆的SVG文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="green" />
</svg>

在svg 标签中 包含一个 circle 标签，circle元素的属性 定义了这个圆的特性。

SVG 本身还定义了 多种图形标签，路径标签、文本标签、特效标签、滤镜等。

详见：

SVG 教程 | 菜鸟教程 (runoob.com)

SVG 在线编辑器

二、Qt 怎么显示和创建SVG

Qt提供了用于在小部件和其他绘画设备上渲染和显示SVG图纸的类。

1. QGraphicsSvgItem 可用于呈现SVG文件内容的QGraphicsItem

2. QSvgWidget 用于显示可缩放矢量图形（SVG）文件内容的小部件

3. QSvgRenderer 用于将SVG文件的内容绘制到绘画设备上

4. QSvgGenerator 用于创建SVG图纸的绘画设备

2.1 使用QGraphicsSvgItem 显示

1）新建一个文本文件，复制上面的表示圆的SVG的文本，并保存到代码目录下，文件名为 circle.svg

2）通过 QGraphicsSvgItem 类的构造函数 来传入 SVG 的文件

#include <QtWidgets>
#include <QtSvg>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QGraphicsSvgItem *item = new QGraphicsSvgItem(QString( "circle.svg"));
    item->setFlag (QGraphicsItem::ItemIsMovable);
    QGraphicsScene scene;
    scene.addItem (item);

    QGraphicsView view;
    view.setScene (&scene);
    view.show ();

    return a.exec();
}

2.2 使用 QSvgWidget 显示

这个更简单，因为不需要加入场景和视窗。

也是通过 QSvgWidget类的构造函数 传入 SVG 的文件的文件名

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QSvgWidget w(QString( "circle.svg"));
    w.resize (300,300);
    w.show ();
    return a.exec();
}

2.3 使用 QSvgRenderer 渲染其他绘制设备

QGraphicsSvgItem 和 QSvgWidget 之所以能够直接显示SVG图形，是因为其内部的QSvgRenderer类，在构造函数传入SVG文件名时，QSvgRenderer就加载了文件，并在绘制事件时，调用 QSvgRenderer::render( painter ) 方法。

使用QSvgRenderer类还可以对渲染过程进行更多控制，因为它可以用于在其他绘制设备（例如QImage和QGLWidget）上进行绘制。

比如：

1）使用QSvgRenderer 加载SVG

2）获取 QSvgRenderer 返回的大小

3）定义绘制设备 比如 QPixmap

4）提供 QPixmap 的 画家

5）QSvgRenderer 设置绘制设备

6）使用 QLabel 来显示 SVG 图形

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QSvgRenderer render;
    render.load (QString("circle.svg"));

    QSize size = render.defaultSize ();
    QPixmap pix(size*5);        // 可以在这儿直接缩放处理
    pix.fill (Qt::transparent); // 像素清空

    QPainter painter(&pix);
    painter.setRenderHints (QPainter::Antialiasing);
    render.render (&painter);

    QLabel label;
    label.setPixmap (pix);
    label.setAlignment (Qt::AlignCenter);

    label.show ();
    return a.exec();
}

2.4 使用QSvgGenerator 创建SVG 文件

QSvgGenerator 继承了 QPaintDevice，代表一个可绘画设备，但是只产生可缩放矢量图形（SVG）的绘图。 像QPrinter一样，它被设计为只写设备，可以生成特定格式的输出。

​ 要写入SVG文件，首先需要通过设置fileName或outputDevice属性来配置输出。 通常，必须通过设置size属性来指定图形的大小，并且在某些情况下该图形将包含在另一个图形中，还需要设置viewBox属性。

#include <QtWidgets>
#include <QtSvg>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QSvgGenerator generator;        // 定义SVG的产生器
    generator.setFileName (QString("temp.svg"));    // 设置SVG文件名
    generator.setDescription ("Test QSvgGenerator");    // 无所谓
    QSize size(400,400);
    generator.setSize (size);       // 设置大小
    generator.setViewBox(QRect(0, 0, 400, 400));  // 视口大小

    QPainter painter;               // 小画家
    painter.begin (&generator);
    QRect rect(0,0,400,400);
    painter.setBrush (Qt::cyan);
    painter.drawEllipse (rect);     // 直接在 generator 上绘制 一个圆
    painter.end ();                 // 需要保证绘制结束

    return 0;
}

temp.svg内容

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="141.111mm" height="141.111mm"
 viewBox="0 0 400 400"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
  <title>Qt SVG Document</title>
  <desc>Test QSvgGenerator</desc>
  <defs>
  </defs>
  <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

    <g fill="#00ffff" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)"
    font-family="SimSun" font-size="9" font-weight="400" font-style="normal" >
    	<circle cx="200" cy="200" r="200"/>
    </g>
  </g>
</svg>

三、总结

Qt 创建和显示SVG 图形 ，都不算复杂，但是SVG文件本身可以很复杂，可以是包括多个图形元素的集合，如果需要单独显示其中的某个元素，使用 QSvgRenderer 来控制了。