SVG 是什么？可缩放矢量图形解析
简而言之：SVG 就是一个能“画画”的文本文件
SVG 代表“可缩放矢量图形”（Scalable Vector Graphics）。从本质上讲，SVG 文件就是一个纯文本文件。如果你用文本编辑器打开它，你不会看到像 JPEG 或 PNG 那样的像素网格；你会看到描述如何绘制形状的 XML 标记。它是一组数学指令——由曲线定义的路径、有中心和半径的圆形、有宽度和高度的矩形——告诉浏览器或图像编辑器如何渲染图片。一个简单的 logo 可能只有 2 KB 的文本大小。 真正的魔力在于它的名字：“可缩放”。因为文件描述的是几何形状而不是固定的像素网格，所以你可以用同一个 SVG 文件制作一个微小的 16×16 像素的网站图标，也可以制作一个 3 米宽的广告牌，而且质量完全没有损失。试着把 PNG 放大 10 倍，你会得到一团模糊。而 SVG 放大 10 倍后，依然清晰锐利，与原图一模一样。 SVG 是 W3C 的开放标准，目前稳定的版本是 SVG 1.1（早在 2011 年发布），SVG 2 仍在开发中。好消息是，你根本不需要担心兼容性问题。每一个现代浏览器——Chrome、Firefox、Safari、Edge——都原生支持 SVG。这正是为什么 Web 开发者从图标和 logo 到图表和复杂插图都选择使用它的原因。
SVG 与栅格图像格式（PNG、JPEG、WebP）有何不同
PNG、JPEG 和 WebP 等栅格图像本质上是巨大的彩色方块网格。一个 1920×1080 的 PNG 文件会存储其 2,073,600 个像素中每个像素的具体颜色值。文件没有“圆形”或“线条”的概念；它只知道坐标 (142, 87) 处的像素是某种特定的蓝色。这种方法非常适合照片，因为照片中有数百万种细微的颜色变化，任何公式都无法高效地描述。 像 SVG 这样的矢量格式则反其道而行之。SVG 不存储像素。相反，它存储一个命令，比如“在坐标 (150, 90) 处绘制一个半径为 40 像素、填充颜色为 #0057FF 的实心圆”。浏览器或图像查看器负责在显示图像时计算要为哪些像素着色。这使得文件完全独立于分辨率。 这种差异带来了巨大的实际影响。要在不同媒体上使用公司 logo，你可能需要一个 32px 的 PNG 作为网站图标，一个 200px 的版本用于网站页眉，以及一个 2000px 的版本用于印刷宣传册。使用 SVG，一个文件就能完美处理所有这些用例。另一方面，试图将山脉照片表示为 SVG 将是一场灾难。文件需要数百万个独立的路径元素才能近似细节，导致文件巨大，而且看起来仍然比尺寸仅为其十分之一的 JPEG 文件差。 别相信那些告诉你 SVG *总是*更小的人。文件大小完全取决于复杂性。一个简单的双色图标作为 800 字节的 SVG 可能比 4 KB 的 PNG 更小。但一个包含大量渐变和数百条路径的详细插图，其 SVG 文件可能轻易达到 200 KB，而压缩后的 PNG 版本可能只有 80 KB。选择正确的格式需要了解图像的内容。
SVG 文件到底包含什么：探秘内部
因为 SVG 只是 XML，所以你不需要任何特殊软件就能一窥其内部。这是一个完整的 SVG 文件，它绘制了一个带有粗蓝色边框的红色圆形： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> 整个图像只有 141 个字符。`viewBox` 属性设置了我们的绘图画布——一个 100×100 的坐标系统。`cx`、`cy` 和 `r` 属性定义了圆的位置和大小。你可以直接将这段代码复制粘贴到 HTML 文件中，你的网页浏览器会完美地渲染出图像。 当然，实际的 SVG 通常更复杂。像 Adobe Illustrator 或 Figma 这样的设计工具以导出臃肿的文件而闻名，这些文件充满了元数据、编辑器特定的标签，有时甚至包含无法以矢量形式表达的效果所需的隐藏栅格图像。默认设置导出的 SVG 文件可能比优化后的文件大 15-20 倍。 SVG 的真正强大之处在于 `<path>` 元素。路径的 `d` 属性包含它自己的“微型语言”，带有移动虚拟笔 (`M`)、绘制线条 (`L`)、创建复杂曲线 (`C`) 和闭合形状 (`Z`) 的命令。一个单一的、长的路径元素可以描述任何可以想象的形状，从地图上一个国家的轮廓到自定义的字体形状。这就是矢量图形如何实现其标志性的平滑曲线，无论你放大多少倍都不会出现像素化。
常见用例：SVG 的优势与劣势
Logo 是 SVG 的典型应用。一个品牌标志需要在一个 120px 的网站页眉、一张 0.75 英寸的名片和一个几英尺长的展会横幅上都看起来清晰锐利。使用一个主 SVG 文件比尝试管理一个包含所有可能分辨率的栅格文件文件夹要理智和可靠得多。 图标是另一个完美的用例。像 Font Awesome 这样的现代图标集都是以 SVG 形式分发的。在 24×24 像素的小尺寸下，SVG 图标可以像像素完美的 PNG 一样清晰，但它也能完美缩放到 48px 或 96px，以适应现代手机和笔记本电脑的高 DPI 屏幕，所有这些都来自同一个源文件。 这里有一个人们经常忘记的重要用例：数据可视化。当你在新闻网站上看到交互式图表时，很有可能它就是 SVG。像 D3.js 这样的库在浏览器中动态构建这些可视化。条形图中的每个条、散点图中的每个点以及地图上的每个区域都是一个独立的 SVG 元素，可以用 CSS 进行样式设置，并用 JavaScript 进行操作。 现在来个现实检验：不要将 SVG 用于照片。照片的连续色调和复杂纹理无法用矢量路径高效描述。任何试图将照片“描摹”成 SVG 的尝试都会生成一个巨大的文件，看起来像一个廉价的矢量化艺术项目，而不是一张照片。对于任何照片，请坚持使用 JPEG、WebP 或 AVIF。它们会给你带来更小的文件和远超的质量。 此外，在专业的印刷工作流程中，使用 SVG 要小心。印刷界仍然围绕着 CMYK 颜色、专色和叠印设置，而 PDF 和 EPS 等格式对这些功能有更深入、更可靠的支持。SVG 的原生色彩空间是 RGB，虽然你可以嵌入 CMYK 配置文件，但印刷店软件的兼容性充其量也只是不一致。
SVG 格式转换：哪些可行，哪些不行
在矢量格式之间转换通常是比较容易的部分。从 AI 转换为 SVG，EPS 转换为 SVG，或基于矢量的 PDF 转换为 SVG 通常是一个干净利落的过程，因为底层的几何数据已经存在。这主要是从一种文件格式的“语言”翻译到另一种。CocoConvert 可靠地处理这些矢量到矢量的转换，保留路径、颜色和字体排版。 将 PNG 或 JPEG 等栅格图像转换为 SVG 则完全是另一回事。这个过程称为自动描摹，涉及软件猜测像素图像中的形状位置，并绘制矢量路径来近似它们。任何将复杂 logo 输入在线转换器却得到一团糟的人都懂这种痛苦。对于非常简单、高对比度的图形，结果可能尚可接受，但对于任何复杂的东西，它都只是一种近似。要获得真正干净的 logo 矢量版本，没有什么比设计师在 Illustrator 或 Inkscape 等工具中手动重绘它更好的了。 反过来——从 SVG 转换为 PNG 等栅格格式——则很简单。由于 SVG 没有固有的像素大小，你只需要告诉转换器最终 PNG 的尺寸。CocoConvert 允许你指定目标宽度，高度会自动计算以保持宽高比。对于网页使用，导出 1 倍和 2 倍尺寸（例如，400px 和 800px 宽）是常见做法。对于高质量的 300 DPI 打印，请记住 4 英寸宽的图像需要导出为 1200 像素宽。 最后一个常让人困惑的转换是 SVG 到 PDF。由于两者都可以是矢量格式，因此对于艺术品本身而言，转换通常是无损的。症结在于字体。如果你的 SVG 使用了系统上安装但未嵌入的字体，生成的 PDF 可能会用其他字体替代，从而破坏你的设计。专业提示是，在导出 SVG *之前*，在你的设计软件中将所有文本转换为轮廓。
Web 开发中的 SVG：嵌入、样式和动画
你有几种方法可以将 SVG 放到网页上，而你选择的方法会带来实际影响。最简单的方法是使用 `<img>` 标签：`<img src="logo.svg" alt="Company logo">`。这很简单，但它是一个黑盒子。你无法用 CSS 深入其中改变形状的颜色，也无法用 JavaScript 对其进行动画处理。 要获得完全控制，你必须将 SVG 直接内联到你的 HTML 中。SVG 标记成为 DOM 的一部分，就像你的 `<div>` 和 `<p>` 一样。这正是 SVG 在网络上真正闪耀的地方。你可以用 CSS 选择器定位 SVG 内部的任何元素，以在悬停时改变填充颜色，或者使用 JavaScript 和 Web Animations API 创建复杂的交互。现代前端框架就是这样将 SVG 用于图标的——它们作为组件内联渲染。 在 CSS 中使用 `background-image: url('icon.svg')` 是第三种选择，非常适合重复图案或装饰元素。然而，像 `<img>` 标签一样，它会将 SVG 隔离，阻止任何内部样式设置。你可以通过为不同状态创建并链接到不同的 SVG 文件来解决这个问题，但这并不是一个特别优雅的解决方案。 动画是 SVG 真正有趣的地方。你可以将标准 CSS 动画和过渡应用于内联 SVG 中的任何元素。一个流行的“绘制”效果技巧是使用 `stroke-dasharray` 和 `stroke-dashoffset` CSS 属性，使路径看起来像是在屏幕上自行绘制。还有一种名为 SMIL 的原生 SVG 动画语法，但由于其支持历史不稳定（它从未在 Internet Explorer 中工作过），如今大多数开发者仍坚持使用 CSS 或 JavaScript。 最后，谈谈性能。不要让矢量纯粹性拖垮你网站的速度。一个包含数千条路径的非常大、复杂的 SVG 可能会导致浏览器渲染缓慢。如果你有一个复杂的插图用作背景，你最好将其栅格化为优化的 WebP 文件。如果它能在移动设备上节省 300 毫秒的绘制时间，那么牺牲一点点可伸缩性是值得的。
优化 SVG 文件：减小尺寸而不损失质量
永远不要相信设计工具直接导出的 SVG 文件。它们几乎总是充满了不必要的数据。Illustrator 和其他编辑器会添加大量的 XML 元数据、编辑器特定属性、隐藏图层和未使用的定义。优化后，一个 18 KB 的 logo 文件缩小到 3 KB 并不罕见——减少了 80%，而且视觉上没有任何变化。 行业标准工具是 SVGO (SVG Optimizer)。虽然它是一个命令行工具，但最简单的使用方法是通过基于 Web 的 GUI，其中最好用的是 Jake Archibald 开发的 SVGOMG。你可以粘贴你的 SVG 代码或上传文件，并直观地切换不同的优化设置，以查看它们对文件大小和渲染的影响。最大的优化通常来自于删除元数据、折叠组、删除隐藏元素，以及将 `<rect>` 等简单形状转换为更高效的 `<path>` 元素。特别注意“精度”滑块，它控制坐标中的小数位数。将其从 6 降低到 2 通常可以削减文件大小的 20-30%，而且没有任何可察觉的差异。 如果你将 SVG 直接内联到 HTML 中用于图标，你可以更加激进。在 HTML5 中，内联 SVG 不需要 `xmlns` 属性，如果你知道图标总是固定大小，你甚至可以剥离 `viewBox`（尽管这不太常见且有风险）。 CocoConvert 会自动应用一些基本优化，例如剥离元数据和降低坐标精度。这为你提供了一个良好的起点。但对于生产级的 Web 应用，每一千字节都至关重要，我们强烈建议你使用 SVGOMG 处理你的文件。自动化工具必须保守，但能够检查输出结果的人可以安全地将优化推向更远，以获得尽可能小的文件。