> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Rive SVG Import: Prepare Editable Artwork for Animation

> Prepare an SVG for Rive, keep moving parts editable, fix missing images and changed colors, and decide when raster artwork needs tracing before you import.

Source: https://perfectvector.com/blog/rive-svg-import

Language: en
Author: Irene Kim
Published: 2026-09-09T08:00:00+09:00
Updated: 2026-09-09T08:00:00+09:00

You can import an SVG into Rive by dragging the file into the editor or using the Assets panel. Rive converts the artwork into native vector objects you can edit. The imported result needs two checks: does it look right, and can you select the parts you intend to animate? [Rive's SVG documentation](https://rive.app/docs/editor/assets/svg) explains the conversion and its limits.

Start with the original vector file when you have one. If your source is a PNG or JPG, choose between keeping it as an image, drawing the required shapes, or tracing it into SVG first. Tracing is useful for recovering editable contours; you will still need to organize those contours for animation.

## What happens to an SVG inside Rive?

After import, you work with Rive objects. The source SVG is not included in the exported `.riv` file, and Rive's runtimes do not currently convert SVG assets at runtime. Complete the SVG preparation and import in the editor before exporting the Rive file. [Rive's export behavior](https://rive.app/docs/editor/assets/svg#export-behavior) describes this boundary.

The distinction also matters when selecting artwork. A shape layer controls its fill and stroke, while the path or paths inside it define the geometry. Expand a shape in the Hierarchy to inspect those paths. Selecting a parent group can make the whole illustration move even when its children are editable. [Rive's shapes and paths guide](https://rive.app/docs/editor/fundamentals/shapes-and-paths-overview) shows that structure.

If the source SVG itself will not separate, use the [SVG object and ungrouping diagnosis](https://perfectvector.com/blog/svg-wont-ungroup) to identify a group, compound path, or embedded image before changing it.

## Prepare the parts before export

Write down the movements you want before combining or flattening the artwork. Consider a desk lamp: the shade should nod, the arm should lean, and the base should stay still. Those movements suggest separate pieces you can select and arrange.

| Lamp part  | Intended change          | Preparation decision                                                 |
| ---------- | ------------------------ | -------------------------------------------------------------------- |
| Shade      | Rotate at its joint      | Keep its outline and colored details together, separate from the arm |
| Arm        | Lean from the base joint | Keep it selectable independently of the base                         |
| Base       | Stay fixed               | Keep it outside the moving arm group                                 |
| Light beam | Change visibility        | Make it a separately selectable shape if you need this effect        |

The same method works for a character's eyelids, a waving hand, or a logo element: name the movement, then check whether the source contains the piece needed to make it.

**Plan the moving parts**

![Illustration of an assembled desk lamp beside its separate shade, arm, and base, with arrows showing independent movement.](https://perfectvector.com/blog/rive-svg-import/separate-moving-parts.webp)

*Conceptual preparation example: keep the lamp shade, arm, and base separate when they need different movements. Shape separation is a design decision before rigging.*

Name meaningful parts in the source document and preserve a master copy. Keep related details together when they should move together. Avoid merging an entire illustration into one path merely to make the object list shorter.

Once imported, use Rive groups to organize those pieces and give them separate transformation controls. Rive allows you to create a group and place objects inside it in the Hierarchy. You can also group a selection with Command+G on macOS or Ctrl+G on Windows. [Rive's group documentation](https://rive.app/docs/editor/fundamentals/groups) covers these controls.

## Import from an SVG, Figma, or Illustrator

### A saved SVG file

1. Save a separate SVG export so the editable master stays available.
2. Drag the file into Rive, or click **+** in the Assets panel and choose the file to import.
3. Place the artwork where you need it and expand its structure in the Hierarchy.
4. Select one small part, change its fill, then undo the change. Check whether only the intended region changed.

The two file-import routes are documented in [Rive's Assets overview](https://rive.app/docs/editor/fundamentals/assets-overview). A successful import is the start of the editing check.

### Figma

Use **Copy as SVG** for the intended artwork in Figma, then paste into the Rive editor. Check the imported shapes and appearance before copying the rest of a large composition. This is Rive's documented [Figma import route](https://rive.app/docs/editor/assets/svg#importing-from-figma).

### Illustrator

Set the SVG styling to **Presentation Attributes**. Rive documents slightly different labels for Illustrator's export routes:

* **Save As:** in SVG Options, set **CSS Properties** to **Presentation Attributes**.
* **Export As:** in SVG Options, set **Styling** to **Presentation Attributes**.
* **Direct copy and paste:** check the Export As SVG styling options, because Illustrator uses those settings for this route.

Also turn off **Preserve Illustrator Editing Capabilities** in the delivery SVG. Keep the Illustrator master separately. Rive warns that this option adds extra Illustrator data, increases file size, and may include data its importer does not recognize. [Rive's Illustrator guidance](https://rive.app/docs/editor/assets/svg#importing-from-illustrator) is the source for these settings.

## Match the import symptom to the first check

Rive supports linear and radial gradients, but it does not reproduce every SVG feature. The table below translates its [unsupported-feature list](https://rive.app/docs/editor/assets/svg#unsupported-features) into a repair order. The first-check column is a diagnostic suggestion, not a guarantee about your file.

| What changed                                        | Documented import behavior                         | First check in a copy of the source                                                                     |
| --------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| A photo, texture, or illustrated region disappeared | Embedded images are ignored                        | Look for image objects; import the original raster separately or trace only the region that needs paths |
| A gradient exists but its position looks wrong      | Gradient transforms are ignored                    | Rebuild or adjust the gradient placement; do not remove all gradients automatically                     |
| A dashed outline became continuous                  | `stroke-dasharray` imports as a solid stroke       | If the dash shapes must stay fixed, convert them into editable geometry and inspect the result          |
| A soft mask behaves like a hard boundary            | SVG `mask` imports as clipping                     | Rework the visibility effect for the destination instead of expecting the same soft fade                |
| Blur, shadow, or another filter effect disappeared  | SVG `filter` is unsupported                        | Replace the required appearance with supported artwork or build the effect in Rive                      |
| Slanted artwork changed                             | Skew transforms are unsupported                    | Bake the intended shape into path geometry in the export copy                                           |
| Inherited paint became white                        | Fills and strokes using `inherit` default to white | Assign explicit colors to the affected shapes                                                           |

If an Illustrator SVG appears black, begin with the Presentation Attributes export setting, then inspect the affected shape's paint. Black artwork alone does not identify the cause. It should not be confused with Rive's documented white fallback for `inherit`.

For missing image content, the [embedded-raster SVG guide](https://perfectvector.com/blog/svg-contains-raster-image) explains how to check whether the file contains actual paths or a picture inside an SVG container. Rive can import JPEG, PNG, and WebP as their own image assets, according to its [asset-type list](https://rive.app/docs/editor/fundamentals/assets-overview#asset-types). Keeping a textured background as a separate raster can be the right choice.

> **If import never finishes**
>
> Try a small, simple SVG in the same session. If that also fails, save your work and restart the editor before rebuilding the artwork. If only one file fails, isolate its groups in separate export copies until you find the affected section. This separates a session problem from a file-specific problem; it does not establish a universal complexity limit.

## When PerfectVector belongs in this workflow

PerfectVector is useful when your source artwork is raster and you need editable vector contours for Rive. For a flat PNG or JPG illustration, [convert the image into SVG paths](https://perfectvector.com/image-to-vector), then inspect the result in a vector editor before import. Check the silhouette, small gaps, and the boundaries between parts that need separate movement. A trace reconstructs visible regions; it does not recover the original layer names or decide where your animation joints belong.

Return to the lamp example. If the arm and base became one connected shape, separate or redraw that boundary. If a moving piece reveals an area hidden in the source image, draw the missing area yourself. Do this before building the animation around the imported structure.

Use the original SVG when it already contains suitable paths. Use native drawing tools for a few simple geometric parts. Keep photographs and painted textures as raster assets when their appearance matters more than editable contours. Our [image vectorization overview](https://perfectvector.com/blog/what-is-image-vectorization) explains the source-image trade-offs; the [Adobe Animate tracing guide](https://perfectvector.com/blog/adobe-animate-image-trace) covers a separate workflow if Animate is your destination.

## Check one movement before building the animation

On a working copy, select the lamp shade and rotate it slightly. Confirm that the intended details follow it while the base stays still. Undo, select the arm, and repeat. If the wrong parts move, inspect the parent-child arrangement before editing more paths.

Check the pivot as well. In Rive, children inherit a parent's transformations, and the origin determines where rotation or scaling happens. **Freeze** lets you reposition a parent without moving its children; toggle it with **Y** and turn it off after adjusting the origin. Follow [Rive's Freeze and Origin guide](https://rive.app/docs/editor/fundamentals/freeze-and-origin) for the controls.

Before committing to the animation, confirm that:

* every required piece can be selected independently;
* fills, outlines, holes, and gradients still match the intended appearance;
* separately imported rasters are present where you chose to keep them;
* movement exposes no accidental gaps or missing hidden artwork;
* each moving piece rotates around the intended joint;
* the original source and a clean import copy remain available.

## FAQ

**Does importing an SVG make it editable in Rive?**
Yes, for the SVG features Rive supports. Expand the imported artwork in the Hierarchy to select the part you need. If several regions still act as one object, inspect their grouping and path structure.

**Why did the image inside my SVG disappear?**
Rive ignores embedded images during SVG import. Find the original raster and import it as an image asset, or trace suitable artwork into paths when you need editable contours.

**Does Rive support SVG gradients?**
Linear and radial gradients are supported. Gradient transforms are ignored, so a gradient's placement may need adjustment after import.

**Will tracing a PNG create a Rive animation?**
Tracing can create SVG geometry from suitable raster artwork. You still need to inspect and separate moving parts, set their hierarchy and origins, and build the animation in Rive.

## Sources

1. [Rive — SVG & Vector Assets](https://rive.app/docs/editor/assets/svg) — Native-object conversion, Illustrator and Figma import, runtime export behavior, and unsupported SVG features.
2. [Rive — Assets](https://rive.app/docs/editor/fundamentals/assets-overview) — File-import controls and separate raster image assets.
3. [Rive — Shapes and Paths Overview](https://rive.app/docs/editor/fundamentals/shapes-and-paths-overview) — Shape styling and the path geometry inside a shape layer.
4. [Rive — Groups](https://rive.app/docs/editor/fundamentals/groups) — Organizing parts and grouping controls in the Hierarchy.
5. [Rive — Freeze and Origin](https://rive.app/docs/editor/fundamentals/freeze-and-origin) — Parent-child transformations and repositioning an origin without moving child artwork.

***

If your artwork starts as a PNG or JPG and needs editable contours, [prepare an SVG with PerfectVector](https://perfectvector.com/image-to-vector). Inspect the traced parts, import the file into Rive, and test one independent movement before building the rest of the animation.

## Explore

- [Read the HTML article](https://perfectvector.com/blog/rive-svg-import)
- [Fabric.js SVG Import: Keep Artwork Editable on Canvas](https://perfectvector.com/blog/fabricjs-import-svg.md)
- [Custom SVG Shapes in draw.io: Images or Stencils?](https://perfectvector.com/blog/drawio-custom-svg-shape.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)