Importing Vector Artwork (SVG)

Summary

This lesson demonstrates how to bring external vector graphics (SVG) into Rive. You can import artwork by copying layers directly from design tools like Figma/Illustrator or by uploading SVG files. The course covers converting SVGs into native shape layers, generating dedicated artboards, best practices for layer naming, and optimizing file size by managing imported assets.

Step by Step

1. 00:04
   Import via Copy-Paste

   You can copy vector layers in Figma or Illustrator and paste them directly into Rive, which automatically generates an SVG.
2. 00:16
   Import via Drag-and-Drop

   If you have a standalone SVG file, simply drag it into the Assets Panel to upload it to your project.
3. 00:24
   Viewing Asset Details

   Selecting the SVG in the assets panel allows you to check its dimensions, file size, and creation metadata.
4. 00:33
   Adding to Artboard

   Drag the SVG from the assets panel onto your artboard. Depending on the original scale, you might need to adjust its size to fit properly.
5. 00:51
   Generating an Artboard

   Alternatively, right-click the SVG in the assets panel and select Generate Artboard. This creates a new artboard perfectly sized for that SVG.
6. 01:06
   Layer Structure & Naming

   Once imported, the SVG appears as a group of shape layers. Ensure layers are properly named in Figma or Illustrator beforehand for a cleaner hierarchy in Rive.
7. 01:32
   Performance Optimization

   After placing an SVG on an artboard, it becomes native geometry. You can delete the source SVG from the assets panel to reduce file size without losing the artwork on your canvas.

Notes About Current Rive

• Native Geometry: Imported SVGs are converted into editable vector paths, allowing you to manipulate vertices, fills, and strokes just like any other procedural shape.
• Naming Workflow: Consistent naming in your source design software is crucial for managing complex hierarchies once they are brought into Rive for animation.
• File Size Management: Deleting converted SVG assets from the panel is a pro tip for keeping your Rive files lightweight and highly performant.