SVG：用文字写图画的语言

我们熟悉的 JPG、PNG 等图片，本质上都是“点阵图”。它们记录的是每一个像素点的颜色，就像一张巨大的表格：每一格代表一个像素。这样的图像放大后容易失真，因为每个像素都被拉伸。

SVG（Scalable Vector Graphics，缩放矢量图形）完全不同。它不是把像素逐个存下来，而是用文字来描述几何形状和颜色。例如，一个圆在 PNG 中需要成千上万个像素拼接，而在 SVG 中，只需要一句简单的定义：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="yellow" />
</svg>

这里的 <circle> 标签表示一个圆，圆心在 (50,50)，半径为 40，颜色是黄色。浏览器读取这段文字，就能把圆渲染出来。放大时，它依然清晰，因为背后是数学公式，而不是像素块。

为什么 SVG 压缩率高？

SVG 的文件其实就是文本文件，格式基于 XML。与 JPG、PNG 那样的二进制像素数据不同，SVG 里充满了可读的标签和属性，比如 <path fill=…>、<circle> 等，这些字符经常重复。ZIP 压缩算法很擅长处理这种情况：它会把重复的片段抽取出来，用更短的“代号”代替，从而显著缩小体积。

因此，一个复杂的 SVG 文件可能能压缩掉 40%–70% 的空间。而如果 SVG 很简单（比如只有几行代码的小图标），压缩率就不高。

XML 与 SVG 的关系

SVG 之所以能被浏览器理解，是因为它建立在 XML（可扩展标记语言）的基础上。
XML 本身是一种通用的数据描述语言，例如：

<person> <name>Alice</name> <age>20</age> </person>

这段 XML 描述了一个人，包含姓名和年龄。它不规定画什么，只规定数据要用标签来包裹。SVG 则是 XML 在图形领域的一个“专门版本”，定义了一套画图的标签（如 <circle>、<rect>、<path>）。浏览器读取这些标签，就能把数学描述转换成图形。

浏览器与标准

SVG 本身不“画图”，它只是“定义图形的乐谱”；真正的演奏者是浏览器或渲染引擎。为了让不同浏览器都能正确显示，W3C（万维网联盟）制定了统一的 SVG 标准，确保 Chrome、Firefox、Safari 等软件都能用同一种方式理解这些标签。

小结

SVG 的独特之处在于，它既是矢量图，又是可读的文本文件。你可以像修改一段文字那样，直接改动它的代码，圆心就会移动，半径会改变，颜色会切换。相比只能“看”的点阵图，SVG 更像是一门“用文字写图画”的语言。