认识 SVG -- 矢量图形与光栅图形

计算机中描述图形信息有两大系统，分别是光栅图形和矢量图形。
图中左边是矢量图形，右边是光栅图形。下面分别介绍它们的优缺点。

光栅图形

光栅图形，也被称为位图，是一种由像素（或位）组成的数字图像。在光栅图形中，每个像素都有一个特定的位置和颜色。当这些像素在屏幕上以正确的顺序和颜色排列时，它们会形成一幅图像。

分辨率

光栅图像的分辨率以每英寸的点数或者dpi表示，分辨率越大，图像越清晰。光栅图形最适合用于复杂的、包含大量细节和颜色的图像，如照片。然而，它们的一个主要缺点是，如果你尝试放大一个光栅图形，图像可能会变得模糊或像素化。这是因为当你放大图像时，每个像素也会变大，这可能会导致图像质量下降，产生锯齿。

颜色

每个像素值都通过一个具体的 rgba 的色值去表示。

文件大小

由于位图存储了整个图片每个像素的颜色值，因此，分辨率越高，文件越大。

文件格式

常见的光栅图形格式包括JPEG、PNG、GIF和BMP。每种格式都有其特定的用途和优点。例如，JPEG常用于照片，因为它可以有效地压缩文件大小，而PNG则支持透明度，适合用于网页设计。

矢量图形

矢量图形是一种计算机图形表示方法，它使用数学公式（点、线、曲线和形状）来描述图像。与光栅图形（也称为位图）相比，矢量图形不是基于像素网格的，而是基于几何形状的。

分辨率

矢量图像的分辨率由数学定义，而不是像素。它们可以按比例放大或缩小而不会降低质量。当插图（绘图）程序向上或向下调整矢量图像的大小时，它只是将对象的数学描述乘以缩放因子。

例如，一个方形物体需要乘以系数2才能使尺寸加倍。数学运算只需重新计算即可生成两倍于原始尺寸的物体。因为矢量图像可以向上或向下缩放而不会丢失图像质量。

与光栅图像不同，矢量图像质量不受每英寸点数或分辨率的限制。这是矢量图形的很大的优点。

颜色

由于矢量图形由点、线等描述矢量的对象组成，因此，修改矢量图形的颜色只需要修改它包含的对象的颜色即可。不像位图那么麻烦。

文件大小

矢量图形文件通常较小，因为它们只需要存储图形元素的几何信息和样式属性。此外，矢量图形可以轻松地进行编辑和操纵，因为它们的组成部分是基于数学公式的。

文件格式

常见的矢量格式包括EPS（Encapsulated PostScript），WMF（Windows图元文件），AI（Adobe Illustrator），CDR（CorelDraw），DXF（AutoCAD），SVG（可缩放矢量图形）和PLT（Hewlett Packard图形语言图文件）

认识 SVG

SVG (可缩放适量图形，Scalable Vector Graphics) 是一种基于 XML 的二维矢量图像格式，其中一种矢量图形的表示方法。主要用于在网络上显示矢量图形。

SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。非常适用于在 HTML 中工作。

如下面这个简单表示圆的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 还定义了很多标签，可在如下链接学习：
w3school SVG 学习链接

Qt 也支持显示 SVG 的格式，后续文章继续分享。