Skip to main content
SVG is one of the easiest ways to bring existing vector artwork into Rive. When you import an SVG, Rive converts the SVG into native Rive vector objects. After import, the artwork is no longer an SVG—it becomes editable shapes, paths, fills, strokes, and groups that behave like any artwork created directly in Rive.

Importing SVG Files

You can import SVG files or copy vector artwork from design tools like Figma and Illustrator. For general importing steps, see Assets overview.

Importing from Figma

You can use Copy as SVG and paste it directly into the Rive editor. Copy as SVG from Figma

Importing from Illustrator

When exporting or copying SVGs from Illustrator, use Presentation Attributes for styling.
  • If you use Save As, open SVG Options and set CSS Properties to Presentation Attributes.
  • If you use Export As, open SVG Options and set Styling to Presentation Attributes.
  • If you copy and paste directly from Illustrator into Rive, Illustrator uses the Export As SVG options, so make sure Styling is set to Presentation Attributes there.
Also disable Preserve Illustrator Editing Capabilities. This adds extra Illustrator data that can make the SVG much larger and may include data Rive’s importer does not recognize.

Export Behavior

SVG assets only use Automatic export behavior. Rive converts SVGs into native vector objects before runtime export. The original SVG file is not included in the .riv, and runtimes do not currently convert SVG assets at runtime.

Unsupported Features

Most SVG artwork imports without issue, but some SVG features do not have direct equivalents in Rive and are imported differently or ignored.
SVG FeatureImport Behavior
Embedded imagesIgnored.
Gradient transformsIgnored. Linear and radial gradients are still supported.
stroke-dasharrayImported as a solid stroke.
maskImported as clipping.
filterNot supported.
skew transformsNot supported.
Inherited fills and strokes (inherit)Inherited colors default to white.
If your artwork relies on unsupported SVG features, consider converting them to editable paths in your design tool before importing into Rive.