跳到主要内容

SVG 与矢量资产

SVG 是将现有矢量 artwork 带入 Rive 的最简单方式之一。

导入 SVG 时,Rive 会将 SVG 转换为原生 Rive 矢量对象。导入后,artwork 不再是 SVG——它会变成可编辑的 shapes、paths、fills、strokes 和 groups,其行为与直接在 Rive 中创建的任何 artwork 一样。

导入 SVG 文件

你可以导入 SVG 文件,也可以从 Figma 和 Illustrator 等设计工具复制矢量 artwork。

有关通用导入步骤,请参阅 Assets overview

从 Figma 导入

你可以使用 Copy as SVG 并将其直接粘贴到 Rive editor 中。

从 Figma Copy as SVG

从 Illustrator 导入

从 Illustrator 导出或复制 SVG 时,请使用 Presentation Attributes 进行样式设置。

  • 如果使用 Save As,打开 SVG Options 并将 CSS Properties 设置为 Presentation Attributes
  • 如果使用 Export As,打开 SVG Options 并将 Styling 设置为 Presentation Attributes
  • 如果直接从 Illustrator 复制并粘贴到 Rive,Illustrator 会使用 Export As SVG 选项,因此请确保其中的 Styling 设置为 Presentation Attributes

同时禁用 Preserve Illustrator Editing Capabilities。这会添加额外的 Illustrator 数据,使 SVG 变得更大,并且可能包含 Rive 导入器无法识别的数据。

导出行为

SVG 资产仅使用 Automatic 导出行为。

Rive 会在运行时导出之前将 SVG 转换为原生矢量对象。原始 SVG 文件不会包含在 .riv 中,runtimes 目前也不会在运行时转换 SVG 资产。

不支持的功能

大多数 SVG artwork 都可以顺利导入,但有些 SVG 功能在 Rive 中没有直接对应项,因此会以不同方式导入或被忽略。

SVG 功能导入行为
嵌入图像忽略。
渐变变换忽略。仍支持线性和径向渐变。
stroke-dasharray作为实线描边导入。
mask作为裁剪导入。
filter不支持。
skew 变换不支持。
继承的填充和描边(inherit继承颜色默认为白色。

如果你的 artwork 依赖不受支持的 SVG 功能,请考虑在导入 Rive 之前,在设计工具中将它们转换为可编辑路径。