一个插图，三个 SVG 输出

假设我们在不同的设计应用程序中绘制相同的矢量图形，并将每个图形导出为 SVG 以在 Web 上使用。我们是否应该期望从每个应用程序获得相同的 SVG 文件？

一方面，我们可能会期望每个文件都相同，因为我们过去导出图像的经验。应用程序通常在保存 JPG、PNG 和 GIF 时保持一致，可能只是总体文件大小略有不同。

另一方面，SVG 与我们通常的图像文件不同，我们的期望可能需要适应这些差异。SVG 的输出可能是视觉上的，但我们真正谈论的是数学和代码。这意味着 SVG 文件更类似于从预处理器编译的 CSS 文件。根据用于编译代码的方法，您的结果可能会有所不同。

我决定在 Illustrator、Sketch 和 Figma 中绘制相同的插图，并比较导出的 SVG 代码。这篇文章将总结这些结果。

关于插图

它并不花哨。一个基本的加号，白色填充，位于黑色填充的圆圈之上。这个想法是使用一些类似于任何网站上常见的图标的东西。

插图绘制了三次，每个应用程序一次。在一个应用程序中创建图标，然后将其复制粘贴到另一个应用程序中，似乎不是一个公平的比较。这允许每个应用程序根据其自己的原生工具来解释 SVG。我不是最熟练的插画师，所以我制作了一个插图，然后在其他应用程序中对其进行描摹，以确保所有内容都按比例缩放，并且所有点几乎都相同。

关于比较

值得注意的是，这篇文章根本不关心该组的“最佳”导出。更有趣的是（1）SVG 代码的编译方式是否存在差异，以及（2）这些可能的差异如何影响前端工作流程，甚至影响哪个应用程序更适合特定项目。

以下是正在比较的内容

• 文件大小
• 代码结构
• 命名规范

还有一点需要提及的是，在此比较中，我们假设使用默认导出选项。Illustrator 有一套强大的选项，可以完全改变 SVG 文件的保存方式，而其他应用程序则没有。我决定使用默认的 Illustrator 导出设置，除了在导出时不缩小代码外。

都准备好了吗？让我们看看结果。

并排代码比较

这是在 2017 年编写的。像这样的应用程序在不断发展。例如，Figma 发布了关于他们对 SVG 导出所做的改进的博文。SVG 有 直接认可的优化插件。而且您应该 始终优化您的 SVG！ 💪

表格比较

比较	Illustrator	Sketch	Figma
导出设置	是	否	否
文件大小	498 字节	946 字节	1 KB
XML 头	否	是	否
包含 和 属性	否	是	是
包含viewBox 属性	是	是	是
SVG ID	是	否	否
SVG ID 名称	生成	NA	NA
SVG 数据名称属性	图层名称	NA	NA
标题标签（<title>）	文件名	画板名称	图层名称
描述标签（<description>）	NA	使用 Sketch 创建	使用 Figma 创建
包含定义（<defs>）	否	是	是
包含组（<g>）	是	是	是
组 ID 名称	NA	按页面名称、画板、组，然后图层组织	按框架、组，然后图层组织
包含使用（<use>）	否	否	是

比较总结

这些结果非常有趣。就像我之前提到的，这里的目标不是宣布谁做得最好™，而是要衡量是否存在差异——当然存在差异！

文件大小

总的来说，SVG 的一个巨大优势是它与光栅图像相比的文件大小很小。这三种情况都体现了这一优势。例如，在 Sketch 中导出为 PNG 的相同图标大小为 12KB。Sketch 的 SVG 输出比其 PNG 对应物节省了 97% 的空间。

我不确定这里三个结果之间文件大小的差异是否都那么重要，尽管事实上 Illustrator 的输出导致的文件大小比 Figma 的输出小约 30%。我之所以这样说，是因为在生产中使用的 SVG 文件很可能会以与使所有这些都变得微不足道的方式相同的方式进行缩小和缓存。

也就是说，文件大小存在差异这一事实可能会影响您用于 SVG 工作流的构建工具以及该构建工具的设置配置方式。

代码结构

文件大小的差异实际上归结于每个应用程序构建其编译代码的方式。例如，Figma 非常注重对形状和路径进行分组和定义，以便在不同的上下文中更方便地重复使用它们，而 Illustrator 完全避免了这些操作，并且倾向于使文件更容易内联。

同样，目标不是确定哪种方法更好，而是认识到生成的文件中存在不同的理念，并以此来帮助确定当前工作的正确工具。根据您的需求和优先级，您可能在一个实例中获得更小的文件大小，但在另一个实例中获得更多灵活性。

命名规范

另一个例子是 Illustrator 默认如何在<svg>元素上使用唯一的生成 ID。这使得内联文件不太可能与其他内联文件冲突，在这些文件中，设计人员可能在多个文件中使用了相同的文件、画板或图层名称。相比之下，Sketch 和 Figma 都不直接在 SVG 元素上使用 ID。

有一些构建工具可以帮助创建 ID 和类名称，但是，如果您需要手动编辑 SVG 文件或出于某种原因必须使用提供的文件，那么了解应用程序如何命名事物可能会影响您处理工作的方式。

总结

从这次比较中我获得的最大收获是，提醒自己 SVG 最终是代码。我们用来绘制矢量图形的应用程序只是创建代码的 GUI，并且根据编写代码的人的不同，代码的编写方式也可能不同。

这与类似于CodePen Rodeo（顺便问一下，下一次是什么时候？）的东西没有什么不同，其中提供了一个单一的设计，许多人开始用自己的方式编写代码。没有“正确”的编码方式，但看到不同的人采取不同的路径来实现相同的交付成果很有趣。

通过这个比较强调的底线是，我们不能想当然地认为我们拥有的资源是理所当然的。尽管我们可能很享受机器愿意代表我们做出决定的事实，但前端工作流程仍然是一个压倒性的主观任务，并影响着我们如何完成工作。