AI 转 SVG 转换器

什么是 AI 转 SVG

AI 转 SVG 是把在 Adobe Illustrator 中创建的矢量稿件,转换为所有现代浏览器都支持的开放格式 Scalable Vector Graphics 的过程。转换时,稿件中的内容 (矢量路径、锚点、文本块、填充、描边、渐变、不透明度、蒙版、组) 会在保留矢量本质的前提下被搬运到 SVG 中,文件由此可以直接嵌入 HTML 标记、在 CSS 中使用、在任何浏览器中打开,以及在任何文本或图形编辑器中编辑。

AI 是 Adobe Illustrator 的专有格式,Adobe Illustrator 是业界领先的专业矢量图形编辑器。AI 会把稿件的矢量内容连同图层、效果、符号、画笔、色板、画板和输出参数一起保存。该格式最显著的特点是,要以原生方式处理 AI,需要 Adobe Creative Cloud 授权或合适版本的 Illustrator。文件结构是为 Illustrator 自己的工作流而优化的,对于没有 Illustrator 的人来说,AI 文件等同于无法访问的源文件,而且根本无法用于网站和应用 - 浏览器和操作系统都不会直接打开 AI。

SVG 是 W3C 制定的开放矢量图形标准,所有现代浏览器都不需要任何插件即可支持。SVG 用数学方式描述图像:每个图形被保存为一组路径、填充、描边和属性。文件本身是 XML 格式的文本,因此 SVG 可以无损地缩放到任意尺寸,简单几何图形所占空间非常小,既可以在图形编辑器中编辑,也可以在文本编辑器中手动修改。SVG 会被搜索引擎收录,支持动画、交互,以及通过 ARIA 实现的可访问性。

AI 转 SVG 把封闭的可编辑源文件,变成可在网页和应用中通用的矢量素材。转换之后,Logo、图标或插图在手机、平板、显示器和 Retina 屏幕上的清晰度完全一致,放大也不会损失质量,并且可以方便地嵌入页面、邮件、演示文稿和界面中。

AI 与 SVG 格式对比

二者的根本区别在于使用场景。AI 是设计师的工作文档,稿件在其中被创建、打磨并完成至最终版本;SVG 则是在浏览器、网站、移动应用以及任何界面中展示成果用的通用矢量文档。当你把 AI 转换为 SVG 时,你就是从一个封闭的源文件,转向一个面向发布与缩放的开放素材。AI 文件作为母版留在作者手中,而 SVG 进入生产环境 - 进入网站、设计系统、应用、邮件、移动游戏或印刷模板。

何时该用 SVG 而非 AI

网站上的 Logo 和品牌标识

公司在网站上的 Logo 与 SVG 格式天然契合。与栅格图不同,SVG Logo 在手机的 Retina 屏幕、普通显示器和大型电视屏幕上都同样清晰。如果 Logo 保存为 AI,就无法直接放到网站上,必须先转换成浏览器能理解的格式。SVG 出色地解决了这个问题:同一个文件可以在所有设备上工作,不需要为不同的像素密度准备多个版本,体积小,加载也比任何栅格替代品都快。Logo 颜色只需一行 CSS 即可修改,无需在 Illustrator 中重新搭建稿件,这让深色主题与季节性外观的支持变得很轻松。

界面中的图标

现代 Web 应用和移动应用大量使用 SVG 作为图标。一套 SVG 图标可以覆盖所有屏幕尺寸:无论是头部 16 × 16 的小图标,还是功能介绍页里更大尺寸的图标,都能清晰呈现。SVG 图标允许通过代码控制颜色、描边粗细以及悬停时的行为,这把静态图变成了界面中有生命的元素。如果图标集是在 Illustrator 中制作的,把 AI 转成 SVG 后就成为可直接用于设计系统、前端组件和 UI 套件的素材。

网页上的插图

设计师常在 Illustrator 中绘制文章、落地页、首页和产品介绍区块的插图。把这些插图发布为 SVG 很方便:它们能适应任意容器宽度,在任何设备上都保持清晰,并且因为文本表达紧凑而加载得很快。大型的主视觉插图,SVG 比同等高分辨率的栅格图占用更少空间,而且在桌面显示器和手机屏幕上都同样好看。

移动应用与游戏

应用开发者在导航图标、按钮、装饰背景、启动画面元素以及小型动画等可缩放的界面元素上更偏爱 SVG。SVG 与具体分辨率无关,所以同一份图形可以适配所有设备 - 从轻巧的手机到平板。在移动游戏中,SVG 用于界面元素、道具图标和进度指示。把 AI 转成 SVG,就是把设计师的源文件直接变成开发者可以直接使用的资源。

邮件营销与模板

邮件中的栅格图在现代屏幕上常常显得模糊,而高分辨率的大图则会拖慢加载速度。SVG 在邮件中的支持正在逐步扩大,大多数现代邮件客户端都能正确显示。新闻邮件中的社交图标、分隔线和装饰元素改用 SVG,既可以减小体积,又能在任何屏幕上保持清晰。在重视品牌一致性和视觉整洁的邮件中,SVG 是栅格格式的合理替代选择。

演示文稿、文档与信息图

现代办公套件和演示软件都支持把 SVG 当作普通图片插入。相对于栅格图的优势显而易见 - 在投影仪和大屏幕上,矢量图在任何缩放级别下都保持清晰。信息图、示意图、流程图和技术图纸做成 SVG 后,无论是在小预览窗里的幻灯片中,还是在大厅里的全屏演示中,都同样整洁好看。对于今后可能需要大尺寸打印的文档,SVG 源文件也比栅格图更有优势。

任意尺寸的打印

SVG 把 AI 的矢量本质带入了一个开放的标准。这意味着图形依然适合任何尺寸的打印 - 从铅笔上的小贴纸到大楼上的巨型条幅。设计师可以把 SVG 直接交给印刷厂、广告公司或礼品制作方,接收方在自己的矢量编辑器中即可打开文件,而不必非得拥有 Adobe Illustrator。这对使用不同软件的分布式团队和外部承包商特别有用。

动画与交互

SVG 允许在浏览器中直接通过 CSS 实现动画,通过脚本实现交互。可以做到鼠标悬停时图标颜色变化、页面加载时 Logo 平滑出现、点击时信息图元素展开等效果。所有这一切都运行得快而流畅,而且无需加载笨重的库。AI 转 SVG 是迈向动画图形的第一步,因为如果源文件不是矢量,就无法对形状进行动画处理。

转换的技术要点

AI 转换为 SVG 时发生了什么

转换分为几个阶段。首先,AI 稿件的结构会被分解为各组成部分:画板、图层、对象、文本块、填充、描边、效果、蒙版、组。然后,每个元素都用 SVG 的语言来描述:矢量路径转换为 path 命令,填充和描边以属性形式转移,文本根据设置选择保留为文本元素或转换为曲线。图层结构变成带有有意义标识符的组,方便之后用 CSS 或脚本对单个部件进行样式化或动画化。结果是一个或多个 SVG 文件,具体数量取决于源稿件中的画板数。

矢量本质的保留

SVG 相对于栅格格式最大的优势,是矢量对象依然保持矢量。Logo、图标和插图放大时不会损失清晰度:既可以作为收藏夹的小图标,也可以作为巨型条幅,而不会出现像素化和模糊。保存为矢量对象的文字在任何分辨率下都很锐利;保留为文本元素的文字则会被搜索引擎收录,被屏幕阅读器读取。

画板与多文件导出

Adobe Illustrator 支持在一个 AI 文件中容纳多个画板,这对一组相互关联的稿件 (一套图标、一系列 Logo、一组用于邮件的插图) 来说很方便。而 SVG 是面向单个根文档设计的。因此,在转换包含多个画板的文件时,会得到多个 SVG 文件,每个画板对应一个。这对 Web 开发非常方便:每个图标都成为独立的 SVG,可以直接用于设计系统或加入 sprite。

颜色空间

AI 会保留稿件原始的颜色空间 (CMYK、RGB、Pantone、Lab)。SVG 作为 Web 格式,主要使用 RGB 空间和 CSS 命名颜色。转换时,颜色值会被转移到 RGB,这适合 Web、屏幕和移动应用。如果原稿是为印刷而以 CMYK 准备的,SVG 中的颜色还原视觉上接近,但数学上有所不同。对于在线场景这是正常情况,对于界面、图标、横幅和 Web 插图毫无影响。Pantone 色和专色也会被转换为相近的 RGB 值。

图层与组的保留

AI 中的图层结构会以带有有意义标识符的组 (g 标签) 的形式传递到 SVG。这对开发者和设计师都很方便:插图中的各个部分可以通过 CSS 或脚本进行寻址,从而独立地施加样式或动画。蒙版、剪切路径、混合模式与不透明度都会以 SVG 支持的结构方式被搬运。无法用 SVG 标准方法表达的复杂效果可能会被简化 - 这种情况下,值得在关键页面上对结果进行视觉检查。

SVG 中的字体

SVG 中的文字可以保留为文本元素,也可以转换为曲线。文本元素保留了可编辑性、可选择、可复制以及可被搜索引擎收录,但要求接收方安装了对应字体,否则浏览器会用默认字体替换。转曲线可以确保任何接收方都看到相同的视觉效果,但文字会变成图形,无法搜索和复制。如何选择取决于用途:Logo 和标题通常选择曲线,说明文字和较大的文本块通常选择带有 Web 字体的文本元素。

哪些文件最适合转换

理想候选:

• 用于网站和设计系统的 Logo 与品牌标识
• 面向 Web 应用和移动界面的图标集
• 文章、博客、首页和落地页的插图
• 技术示意图、流程图、信息图和组织结构图
• 页面装饰元素 - 边框、分隔线、纹样
• 邮件营销、横幅和广告位的图形
• 用于在网站上后续添加动画与交互的模板

可用,但需注意:

• 极复杂的插图,包含大量细节与效果 - 所有内容都会被搬运,但 SVG 体积可能变大,请评估是否值得
• 使用大量特殊字体的文件 - 请提前决定使用 Web 字体还是把文字转换为曲线
• 为印刷而做的 CMYK 稿件 - 转换为 SVG 时颜色会变成 RGB,这对在线场景是正常的;对于印刷,最好为合适的格式准备另一份导出
• 使用大量重型混合效果的多图层稿件 - 复杂组合可能被简化,关键区块应进行视觉对比

不建议转换:

• 还要反复修改的未完成草稿
• 包含大量栅格嵌入图的稿件 - 这种情况下 SVG 中只是嵌入了图片,得不到矢量格式的好处
• 专为高分辨率印刷且要求精确还原颜色的稿件 - 这类稿件最好保留在原始格式中,或导出为合适的印刷格式

SVG 格式的优势

与 AI 和栅格格式相比,SVG 具备几项独有的优势。

浏览器层面的通用支持。 SVG 在所有现代浏览器中都不需要任何插件即可原生打开。文件可以嵌入 HTML 页面、作为图片添加,或者用作 CSS 背景 - 在任何访客那里,效果都同样正确呈现。

开放的国际标准。 SVG 作为 W3C 标准被记载,不依赖于某家厂商的命运。这保障了它的长寿:即便某家公司停止支持,格式本身也不会消失;今天创建的文件几十年后依然可读。

无损缩放。 SVG 的矢量内容可以缩放到任意尺寸而不会出现像素化。同一个文件可以同时用于小图标、中等插图和首页大型横幅。

简单图形的体积小。 SVG 中的 Logo、图标和示意图,占用的空间显著小于同等的栅格图,这能加快页面加载速度,节省移动用户的流量。

可在任何编辑器中编辑。 SVG 是 XML 文本,因此文件可以在任何图形编辑器、浏览器开发者工具甚至普通文本编辑器中打开和修改。颜色、尺寸、形状只需简单改动即可。

通过 CSS 定制样式。 SVG 元素的颜色、描边粗细、不透明度和行为都通过 CSS 规则设定。这让我们可以方便地支持深色主题、节日装饰和自适应图形变体,而不需要重新搭建稿件。

动画与交互。 SVG 支持通过 CSS 和脚本进行动画,可以做平滑过渡、悬停反应、滚动到位时出现的图形,以及交互式图表与信息图。

可访问性。 SVG 支持 ARIA 属性,以及描述图像的 title 与 desc 标签,这对屏幕阅读器用户很重要,也有助于符合 Web 可访问性标准。

可被搜索引擎索引。 SVG 内部的文本会被搜索引擎读取,文件本身也可以包含有意义的组与图层名,这有助于改善图形丰富的页面的搜索引擎优化。

限制与建议

最主要的限制是,SVG 并非为照片和数百万颜色过渡的图像而设计。如果稿件中嵌入了栅格照片,它们在 SVG 中仍然是栅格形式,这部分内容并不会获得矢量格式的好处。对于照片性质的内容,最好使用合适的栅格格式,把 SVG 留给矢量图形使用。

第二个限制是颜色空间。SVG 作为 Web 格式以 RGB 为基础。如果 Illustrator 中的稿件是为印刷而以 CMYK 制作的,转换时颜色会被译为 RGB,与精确的印刷颜色还原可能略有差异。对于 Web 来说这很正常;对于色彩要求严格的印刷工作,最好为支持 CMYK 的格式准备另一份导出。

第三个限制是复杂效果。Illustrator 中一些特定的效果 (3D、特殊混合、自有滤镜) 在 SVG 中会按格式自身的规则被解释,可能以简化的形式呈现。对于关键稿件,在发布前请把 AI 与 SVG 进行视觉对比。

第四个限制是字体。SVG 中的文字只有在接收方拥有对应字体,或页面中绑定了 Web 字体时才能正确显示。如果必须保证文字在任何环境下都呈现一致,在转换前请把文本块转换为曲线 - 这会使文件变大,但能消除字体被替换的风险。

如果 SVG 是为网站准备的,转换之后应进行优化:减少坐标的小数位数,删除多余的元数据和注释,简化很少使用的组。这能减小文件体积并加快页面加载。对于图标,把多个 SVG 合并为一个 sprite 文件可以减少向服务器的请求次数。