Importing Assets
Last updated
Last updated
This article is out of date! Find the new version here.
Import your assets by dragging and dropping them onto the Rive Editor. You can import SVG, JSON, PNG, PSD, and JPG formats.
After dragging in your graphics, they now appear in the Assets Panel, located in the left side of the editor UI. Drag and drop them onto an artboard to begin using them.
For Pro customers, you have the ability to add custom fonts to be used with our Text tool. Simply drag and drop your .OTF or .TTF file into the editor, or use the plus button next to the Font section.
You can make updates to your images after they've been imported.
Do this by selecting the image in the Assets Panel; the asset's properties appear in the Inspector, and a "Replace" button will be available for raster assets (PNG, JPG, PSD).
Hit the replace button and when prompted, select the updated image. You'll notice that this updates all instances of the graphic used in the file.
Rive supports importing SVG (see limitations below), JSON, PNG, PSD, and JPG formats.
You can use "copy as SVG" and paste it directly into the Rive editor.
You can import your Lottie animations into Rive. To get started, drag and drop your Lottie JSON file into the Rive editor. This adds it to your Assets panel.
From there, you can drag it into an existing Artboard or drag it into an empty space to create a new Artboard.
SVG is a very flexible and feature-rich format. We aim to support SVG as best we can, however, there are some features that we do not support at this stage.
When exporting files as SVG, exporting with inline style as opposed to CSS will work best for our importer.
When exporting from other design tools, look for the option to retain IDs and names of your shapes when you export. This will ensure that your imported file retains the same structure and layer names. Most tools have this option, as in the Figma example below.
When exporting from Photoshop, make sure you're only using vector layers. Don't convert or flatten anything to raster.
When using "Save As" to export an SVG from Illustrator, select "Style Attributes" from the CSS Properties instead of the default option. Thanks to V.lang on our feedback site for figuring this out! Be sure to also disable the "Preserve Illustrator Editing Capabilities" as this will make your file much larger and add data that is not recognized by our importer.
Embedded images are ignored, we are planning to implement this (for more info see here).
Gradient transforms are ignored.
We currently cannot provide equal support for this across our runtimes, so this is not supported.
We do support linear and radial gradients, however, which can cover some use cases.
Rive does not have a concept of point (pt) or millimeter (mm) sizing. An SVG that uses dimensions provided in pt or mm will have its values converted to pixels (px). Points are converted to 1.33 px and millimeters are converted to 3.78 px.
SVG provides inherit to let stroke and fills use the color of their ancestors. Rive does not support this and any inherited color defaults to white.
Other unsupported SVG features:
stroke-dasharray - you may see a solid stroke line instead
mask - we treat this like clipping
filter
skew
