RiveにSVGを読み込む：アニメーション用の編集可能な図案

SVGは、ファイルをエディターへドラッグするか、AssetsパネルからRiveへ読み込めます。Riveは図案を編集可能なネイティブのベクターオブジェクトへ変換します。読み込み結果には2つの確認が必要です。正しく見えるか、アニメーションで動かしたい部分を選択できるかを調べます。RiveのSVGドキュメントが変換と制限を説明しています。

元のベクターファイルがあるなら、それから始めます。元画像がPNGやJPGなら、画像のまま残す、必要な図形を描く、先にSVGへトレースする方法から選びます。トレースは編集可能な輪郭の復元に役立ちますが、アニメーション用に輪郭を整理する必要は残ります。

Rive内でSVGはどうなるのか

読み込み後は、Riveのオブジェクトを扱います。書き出した.rivファイルには元のSVGは含まれず、現在のRiveのランタイムは実行時にSVGアセットを変換しません。Riveファイルを書き出す前に、エディターでSVGの準備と読み込みを完了します。Riveの書き出し動作が、この境界を説明しています。

図案の選択でも、この区別は重要です。図形レイヤーが塗りとストロークを制御し、その中のパスが形状を定義します。Hierarchyで図形を展開してパスを調べます。親グループを選ぶと、子が編集可能でもイラスト全体が動く場合があります。Riveの図形とパスのガイドは、この構造を示しています。

元のSVG自体を分離できないなら、変更前にSVGのオブジェクトとグループ解除の診断で、グループ、複合パス、埋め込み画像を特定します。

書き出す前に部品を準備する

図案を結合・統合する前に、欲しい動きを書きます。デスクランプなら、シェードはうなずくように動き、アームは傾き、土台は静止します。そうした動きから、別々に選択・配置できる部品が必要だと分かります。

キャラクターのまぶた、手を振る動き、ロゴの要素でも同じ方法を使えます。動きを言葉にし、その動きに必要な部分が元データにあるか確認します。

可動部品を計画する

元のドキュメントで意味のある部品に名前を付け、原版を残します。一緒に動かしたい関連する細部はまとめます。オブジェクト一覧を短くするためだけに、イラスト全体を1本のパスへ結合しないでください。

読み込み後は、Riveのグループで部品を整理し、それぞれに変換の設定を与えます。Riveではグループを作り、Hierarchyで中にオブジェクトを置けます。macOSではCommand+G、WindowsではCtrl+Gで選択対象をグループ化することもできます。Riveのグループの説明がこれらの操作を扱っています。

SVG、Figma、Illustratorから読み込む

保存したSVGファイル

1. 編集可能な原版を残せるよう、別のSVGを書き出して保存します。
2. ファイルをRiveへドラッグするか、Assetsパネルの**+**をクリックして読み込むファイルを選びます。
3. 必要な場所へ図案を配置し、Hierarchyで構造を展開します。
4. 小さな部分を1つ選んで塗りを変え、元に戻します。目的の領域だけが変わったかを確認します。

2つのファイル読み込み方法は、RiveのAssetsの概要に記載されています。読み込みの成功は、編集確認の始まりです。

Figma

Figmaで目的の図案にCopy as SVGを使い、Riveエディターへ貼り付けます。大きな構図の残りをコピーする前に、読み込んだ図形と見た目を確認します。これはRiveが説明するFigmaからの読み込み方法です。

Illustrator

SVGのスタイル設定をPresentation Attributesにします。Riveは、Illustratorの書き出し方法ごとに少し異なる項目名を説明しています。

• Save As：SVG Optionsで、CSS PropertiesをPresentation Attributesへ設定します。
• Export As：SVG Optionsで、StylingをPresentation Attributesへ設定します。
• **直接コピーして貼り付け：**Illustratorがこの方法で使うExport AsのSVGスタイル設定を確認します。

受け渡し用SVGでは、Preserve Illustrator Editing Capabilitiesも無効にします。Illustratorの原版は別に残します。Riveは、このオプションが余分なIllustratorデータを加え、ファイルを大きくし、読み込み機能が認識しないデータを含める場合があると注意しています。これらの設定はRiveのIllustratorの説明に基づいています。

読み込みの症状に合う最初の確認を選ぶ

Riveは線形・放射状グラデーションに対応しますが、すべてのSVG機能を再現しません。次の表は、非対応機能の一覧を修正の順序として整理したものです。最初の確認は診断の提案であり、個別ファイルの保証ではありません。

IllustratorのSVGが黒く見えたら、Presentation Attributesの書き出し設定から始め、対象の図形の塗りを調べます。黒い図案だけでは原因を特定できません。これは、Riveが説明するinheritの白への代替と混同しないでください。

画像内容の欠落には、埋め込みラスターのSVGガイドで、実際のパスかSVGコンテナー内の画像かを確認できます。アセット種類の一覧によると、RiveはJPEG、PNG、WebPを独立した画像アセットとして読み込めます。質感のある背景を別のラスターとして保つのが適切な場合があります。

読み込みがいつまでも終わらない場合

同じセッションで小さくシンプルなSVGを試します。それも失敗するなら、図案を作り直す前に作業を保存し、エディターを再起動します。1ファイルだけが失敗するなら、別の書き出し用コピーへグループを切り分け、問題の部分を探します。これはセッションの問題とファイル固有の問題を区別するもので、一般的な複雑さの上限を決めるものではありません。

この手順でPerfectVectorが役立つ場合

元の図案がラスターで、Rive用の編集可能なベクター輪郭が必要な場合、PerfectVectorが役立ちます。フラットなPNGやJPGのイラストをSVGパスへ変換し、読み込み前にベクターエディターで確認します。シルエット、小さな隙間、別々に動かす部分の境界を調べます。トレースは見える領域を再構築しますが、元のレイヤー名を復元したり、関節の位置を決めたりしません。

ランプの例へ戻ります。アームと土台が1つにつながった図形になったなら、その境界を分けるか描き直します。動かすと元画像で隠れていた領域が見えるなら、不足部分を自分で描きます。読み込んだ構造に沿ってアニメーションを作る前に行ってください。

適したパスをすでに含むなら元のSVGを使います。少数の簡単な幾何学的部品には標準の描画ツールを使います。編集可能な輪郭より見た目が重要なら、写真や描いた質感をラスターアセットとして残します。画像ベクター化の概要では元画像のトレードオフを、Adobe AnimateのトレースガイドではAnimateが使用先の場合の別の手順を説明しています。

アニメーションを作る前に1つの動きを確認する

作業用コピーでランプのシェードを選び、少し回転します。必要な細部が一緒に動き、土台が静止することを確認します。元に戻し、アームを選んで繰り返します。誤った部分が動くなら、さらにパスを編集する前に親子関係を確認してください。

回転中心も確認します。Riveでは、子は親の変換を継承し、原点で回転や拡大縮小の位置が決まります。Freezeは、子を動かさず親を移動できます。Yで切り替え、原点の調整後に無効にします。RiveのFreezeとOriginのガイドに従って操作します。

アニメーションを進める前に、次を確認します。

• 必要なすべての部品を個別に選択できる。
• 塗り、輪郭、穴、グラデーションが目的の見た目と一致する。
• 残すと決めた別読み込みのラスターが、必要な場所にある。
• 動かしても、意図しない隙間や隠れていた図案の欠落が現れない。
• 各可動部品が、目的の関節を中心に回転する。
• 元データと整理した読み込み用コピーを利用できる。

よくある質問

SVGを読み込むとRiveで編集可能になりますか？ はい。Riveが対応するSVG機能について可能です。Hierarchyで読み込んだ図案を展開し、必要な部分を選びます。複数の領域がまだ1つのオブジェクトとして動くなら、グループとパス構造を調べます。

SVG内の画像が消えたのはなぜですか？ RiveはSVG読み込みで埋め込み画像を無視します。元のラスターを見つけて画像アセットとして読み込むか、編集可能な輪郭が必要なら適した図案をパスへトレースします。

RiveはSVGのグラデーションに対応しますか？ 線形・放射状グラデーションに対応します。グラデーション変換は無視されるため、読み込み後に配置の調整が必要な場合があります。

PNGをトレースすればRiveのアニメーションが作れますか？ 適したラスター図案からSVG形状を作れます。その後も可動部品の確認と分離、階層と原点の設定、Riveでのアニメーション作成が必要です。

参考資料

1. Rive — SVGとベクターアセット — ネイティブオブジェクトへの変換、IllustratorとFigmaの読み込み、ランタイムの書き出し動作、非対応SVG機能。
2. Rive — アセット — ファイル読み込みの操作と独立したラスター画像アセット。
3. Rive — 図形とパスの概要 — 図形のスタイルと、図形レイヤー内のパス形状。
4. Rive — グループ — Hierarchyでの部品整理とグループ化の操作。
5. Rive — FreezeとOrigin — 親子の変換と、子の図案を動かさず原点を移動する方法。

---

PNGやJPGの図案に編集可能な輪郭が必要なら、PerfectVectorでSVGを準備します。トレースした部品を調べ、Riveに読み込み、残りのアニメーションを作る前に1つの独立した動きを試してください。