如何将 AI (Adobe Illustrator) 文件转换为 SVG
什么是 AI 和 SVG 文件，以及为什么要进行转换？
AI 文件是 Adobe Illustrator 的原生格式，它以一种专有结构存储矢量图稿，只有 Illustrator 和少数其他应用才能完全理解。它功能强大，支持 Illustrator 特有的功能，如实时效果、可编辑文本和复杂的混合模式。但所有这些强大的功能都被锁在一个黑匣子里。AI 文件是一个封闭的生态系统。如果你想在浏览器、Web 应用或开发者的构建流程中使用它，你会发现它根本毫无用处。 而 SVG（可缩放矢量图形）则是开放标准。这个基于 XML 的格式由 W3C 维护，所有现代浏览器都能原生渲染。它可以从一个 16×16 的小图标无损放大到巨幅的 4K 广告牌，清晰度丝毫不会降低。因为它的内容只是纯文本，开发者甚至可以直接在代码中操作路径、颜色和动画。一个导出为 8 KB 的 SVG 标志在任何尺寸下看起来都很完美；而同样的高分辨率 PNG 标志可能轻易就超过 200 KB。 在实际工作流程中，从 AI 转换为 SVG 是日常任务。设计师将标志交给 Web 开发者，UI 团队需要图标素材，印刷机构想在网站上展示品牌。问题是，这种转换并不总是完美的。Illustrator 特有的“魔法”——比如栅格滤镜、某些渐变网格、链接字体——在 SVG 中没有直接的对应项。这些元素要么必须在导出前进行简化，要么会被自动化工具近似处理，有时效果很差。从一开始就理解这一点，能为你省去大量的返工麻烦。
最纯净的方法：直接从 Adobe Illustrator 导出 SVG
如果你有 Adobe Illustrator，直接导出是获得干净、可控结果的最佳方式。过程本身很简单，但设置面板才是容易出错的地方。 转到 **文件 > 导出 > 导出为 (File > Export > Export As)**，从格式下拉菜单中选择 SVG，然后点击导出。Illustrator 会弹出“SVG 选项”对话框。请密切关注这些设置，因为它们至关重要。 - **样式 (Styling)**：如果 SVG 之后会用 CSS 添加样式或动画，选择“演示文稿属性 (Presentation Attributes)”是更好的选择。如果它只是一个静态图片，任何选项都可以。 - **字体 (Font)**：将其设置为“转换为轮廓 (Convert to Outlines)”。我再说一遍：除非你百分之百确定最终用户的环境中有你使用的确切字体，否则就把它转换为轮廓。这将字母形状嵌入为矢量路径，从而完全避免了字体依赖问题。 - **图像 (Images)**：如果你的图稿包含照片或纹理等栅格图像，请选择“嵌入 (Embed)”。链接会创建更小的文件，但会引入一个脆弱的外部文件路径依赖，很容易被破坏。 - **对象 ID (Object IDs)**：如果开发者需要用 JavaScript 或 CSS 来定位特定元素，请使用“图层名称 (Layer Names)”。对于每一字节都很重要的静态资源，“最小 (Minimal)”就可以了。 - **小数位数 (Decimal Places)**：对于屏幕图形，值设为 2 几乎总是正确的选择。降到 1 可以节省几个字节，但可能会明显扭曲复杂的曲线。坚持用 2。 - **最小化 (Minify)**：对于生产环境的资源，一定要勾选此项。它会移除空格和注释，能将文件大小缩减 10-20%，相当可观。 在打开导出对话框之前，还有一个关键的准备步骤。你必须平展或扩展那些无法很好地转换为 SVG 的实时效果（使用 **对象 > 扩展外观 (Object > Expand Appearance)**）。例如，Illustrator 的投影效果要么会消失，要么会在你的 SVG 中被转换成一个笨重的栅格图像。任何打开一个所谓的矢量文件却发现里面是个模糊的 JPEG 图片的人，都懂这种切肤之痛。这两种结果都不是你想要的。
使用 CocoConvert 在线将 AI 转换为 SVG
说实话：不是每个人都有有效的 Adobe Creative Cloud 订阅。即使你有，有时也只是需要在一台没有安装 Illustrator 的机器上快速转换一下。对于这些时刻，在线转换器是最实用的解决方案，而 CocoConvert 就能搞定。 在 [CocoConvert 的 AI 到 SVG 转换器](/convert/ai-to-svg) 上的操作极其简单：上传你的 AI 文件，稍等片刻让它处理，然后下载生成的 SVG 文件。无需软件，标准转换也无需注册。 当然，也有一些基本规则。CocoConvert 可以处理最大 100 MB 的文件，这对于大多数 AI 文稿来说绰绰有余。只有那些包含大量高分辨率图像的最复杂的印刷文件才可能超过这个限制，而那些文件最好还是在 Illustrator 中处理。 什么情况下效果最好？扁平的矢量图稿。由基本路径和简单渐变构成的标志、图标和插图转换效果非常好。如果你的 AI 文件主要是由实色填充和描边构成的干净矢量形状，你可以期待得到一个高度准确的 SVG。你会在哪里遇到麻烦呢？还是在 Illustrator 专有的那些“魔法”上。渐变网格、复杂的混合模式以及像“粗糙化 (Roughen)”这样的实时效果，都没有直接的 SVG 对应项。CocoConvert 会对它们进行近似处理，但对于严重依赖这些功能的艺术作品，输出可能需要手动清理。字体也是如此。如果你的 AI 文件使用了未轮廓化的实时文本，转换器会用一个备用字体来替代。为了保证精确的排版，上传前务必在 Illustrator 中将文本轮廓化。
使用免费替代品：Inkscape 及其他工具
Inkscape 是一款出色的免费开源矢量编辑器，可以很好地将 AI 转换为 SVG。对于任何经常使用矢量图但又不想用 Adobe 全家桶的人来说，这是一款必备工具。 在 Inkscape 中，你只需通过 **文件 > 打开 (File > Open)** 打开 AI 文件，然后立即通过 **文件 > 另存为 (File > Save As)** 将其保存，格式选择 SVG。你会看到“普通 SVG (Plain SVG)”和“Inkscape SVG”的选项；为了与浏览器和其他工具有最佳的兼容性，务必选择“普通 SVG (Plain SVG)”。 但这里有个大坑：PDF 兼容性。大多数第三方工具，包括 Inkscape，实际上并不能读取原生的 AI 数据。它们读取的是 Illustrator 嵌入在文件中的一个 PDF 流。如果 AI 文件在保存时没有勾选“创建 PDF 兼容文件 (Create PDF Compatible File)”选项，Inkscape 就无法打开它。你只会得到一个空白画布或一个错误。如果客户发给你的 AI 文件打不开，几乎可以肯定是这个原因。你得请他们重新保存并勾选那个选项。 当然也有其他工具。Affinity Designer，一次性购买大约 70 美元，它有出色的 AI 导入功能，并且能生成非常干净的 SVG。在我看来，如果你不打算上 Adobe 的船，这是最好的长期投资。对于命令行爱好者，也有像 `cairosvg` 和 `svg-convert` 这样的工具，但它们通常需要先将 AI 转换为另一种格式，这违背了简化工作流程的初衷。 对于一次性的快速转换，CocoConvert 的在线工具仍然比安装和学习 Inkscape 更快。然而，如果你发现自己每周都需要这样做，那么投入时间学习 Inkscape 或花钱购买 Affinity Designer 将是值得的。
常见问题及其解决方法
转换完成了，但 SVG 看起来……不对劲。这种情况时有发生。以下是常见元凶及其修复方法。 **字体丢失或被替换**：你打开 SVG，发现精心挑选的漂亮字体被替换成了通用的系统字体。解决方法是让字体变得无关紧要。在转换之前，在 Illustrator 中选择所有文本并将其轮廓化（**文字 > 创建轮廓 (Type > Create Outlines)**，或 Shift+Ctrl+O / Shift+Cmd+O）。这将字母变成了普通的矢量路径，从而消除了字体依赖。 **SVG 内部出现栅格瑕疵**：文件本应是矢量的，但你却看到了模糊的像素，或者文件大小达到了惊人的几 MB。这是 Illustrator 效果在导出时被栅格化的典型标志。解决方法是自己动手，而且要做得更好。在 Illustrator 中，导出前转到 **对象 > 扩展外观 (Object > Expand Appearance)**。这将大多数实时效果转换为它们的矢量路径等效物。 **颜色看起来不一样**：你品牌标志性的亮蓝色现在看起来暗淡无光。这很可能是色彩空间的问题。Illustrator 通常默认为印刷工作使用 CMYK，但 SVG 是一种网页格式，它存在于 RGB 的世界里。解决方法是在导出前，通过 **文件 > 文档颜色模式 > RGB 颜色 (File > Document Color Mode > RGB Color)** 在 Illustrator 中更改文档的颜色模式。 **SVG 文件巨大**：一个本应只有 15 KB 的简单 logo 不知怎么回事变成了 2 MB。这通常指向嵌入的栅格图像、过高的小数精度或未经简化的复杂渐变网格。解决方法是重新导出并启用最小化，将小数位数降至 2，并在开始前简化或扩展复杂对象。 **在线转换器输出空白**：你上传了 AI 文件，结果下载回来一个空的 SVG。还记得我们之前谈到的那个 PDF 兼容性设置吗？这就是它坑你的地方。这个 AI 文件很可能是在保存时没有勾选“创建 PDF 兼容文件”复选框，导致转换器无内容可读。唯一的解决方法是重新保存原始 AI 文件并启用该选项。
转换后优化你的 SVG 文件
先别急着交付那个 SVG 文件。一个刚导出的文件，即使来自 Illustrator，通常会充斥着冗余代码，这些代码在不带来任何视觉好处的情况下增加了文件大小。对于 Web 用途，用优化器处理一下你的 SVG 是一个必不可少的步骤。 **SVGO** 是 SVG 优化的行业标准。它是一个 Node.js 工具，但它的引擎也驱动着 jakearchibald.github.io/svgomg 这个极其有用的在线工具。只需上传你转换后的 SVG，SVGOMG 就会提供一个实时预览和一个滑块，让你实时看到文件大小的节省情况。对于大多数资源，你可以安全地启用移除注释、移除元数据、折叠无用组、合并路径和移除空属性等选项。文件大小减少 30-60% 是很常见的。 但要小心，如果你的开发者计划用代码定位特定元素，请谨慎使用“移除 ID (Remove IDs)”之类的选项。同样，如果 SVG 将用于动画，避免过于激进的路径合并；你无法对已经合并成一整块的路径进行动画处理。 对于生产环境的 Web 资源，你还需要决定这个 SVG 是内联（代码直接粘贴到 HTML 中）还是外链（通过 `<img>` 标签或 CSS 链接）。内联 SVG 很棒，因为它们可以被你的主 CSS 文件设置样式，但它们会增加 HTML 文档的大小，并且不会被单独缓存。外链 SVG 会被浏览器缓存，但用 CSS 操作起来更困难。 最后再检查一遍：使用像 W3C 标记验证服务这样的工具来验证你最终的 SVG。任何花过一个小时去调试一个在 Chrome 中完美渲染但在 Safari 中一塌糊涂的 SVG 的人，都明白这一步的价值。快速的验证过程可以在畸形代码演变成生产环境的紧急事故之前将其捕获。
根据你的情况选择正确的方法
那么，将 AI 文件转换为 SVG 的最佳方法是什么？归根结底，这取决于你是谁，以及你想做什么。 **对于拥有 Illustrator 的专业设计师：** 自己动手。保证完美转换包含效果、渐变和自定义字体的复杂图稿的唯一方法，就是做好准备工作——轮廓化文本、扩展外观、切换到 RGB——然后使用 Illustrator 自带的 SVG 导出对话框。你有最终的控制权，那就用好它。 **对于赶工期的开发者：** 你的设计师刚丢给你一个 AI 文件就走了。别慌。对于像标志和图标这样直接的资源，[CocoConvert 的 AI 到 SVG 工具](/convert/ai-to-svg) 是你最快的途径。它快速，无需软件，并且在处理非超复杂图稿时能很好地完成任务。 **对于开源爱好者或预算有限的创意人士：** 你发现自己经常需要这样做，但又不想支付“Adobe 税”。Inkscape 就是你的答案。它是一个强大且免费的替代品，但你必须注意 PDF 兼容性的要求。如果你的源文件没有正确保存，它就无法工作。 无论你选择哪种方法，都要检查你的成果。至少在 Chrome 和 Firefox 中打开最终的 SVG 文件。确保颜色正确，文本清晰，并且能够干净地缩放。花两分钟目视检查一下，就能在大多数转换问题变成别人的调试噩梦之前发现它们。