跳到主要内容

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 之前,在设计工具中将它们转换为可编辑路径。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群