SynfigにSVGを読み込む：編集可能なアニメーションレイヤーの準備
SynfigへのSVG直接読み込みと、InkscapeのSIF書き出しを比較します。アニメーションやリグを作る前に、レイヤー、色、個別に動かす部分を確認しましょう。
目次
SynfigはFile → ImportからSVGを読み込めますが、アニメーションを付ける前に生成されたレイヤーを確認してください。SVG読み込みのドキュメントには、直接の読み込みで使いやすく再現できない場合に、InkscapeからSIFを経由する方法も記載されています。
どちらもベクター図案を受け渡す方法です。動きの計画を作るものではありません。読み込んだデスクランプが正しく見えても、シェード、アーム、土台を個別に選択・回転しにくい場合があります。
1つのオブジェクトから始め、動かす部分を決め、読み込み結果をSVGの原版と比較します。シーン全体を読み込んで後から構造を知るより、短いレイヤーと動作の確認のほうが役立ちます。
SVGの直接読み込みかSIFコピーを選ぶ
すでにSVGがあるなら、まず直接読み込みを試します。元のエディターで原版を開いたままにし、形状、塗り、構成を比較できるようにします。
| 方法 | Synfigへ持ち込むファイル | 確認するもの |
|---|---|---|
| SVGの直接読み込み | 書き出した.svg | 見える図案、編集可能な形状、レイヤー構造、縮尺 |
| InkscapeのSIF書き出し | 別の.sifコピー | 書き出されたレイヤーグループ、塗り、輪郭と、同じ見た目の確認 |
| ラスターの読み込み | 対応する画像ファイル | 平らな画像を動かすだけでそのシーンに十分か |
Inkscapeの公式Synfig出力拡張の定義にも、SIFの選択肢があります。**Synfig Animation (*.sif)**を定義し、情報が失われる可能性のある書き出しとして示しています。インストールしたInkscapeにその形式があるかを確認してください。書き出し機能が存在しても、すべての環境で同じように利用できるとは限りません。
必要な見た目と編集構造を保つ方法を使います。SIFは完全なSVG互換性を約束するものではなく、SVGが表示された段階ではまだリグではありません。
書き出す前に動かす部品を計画する
土台、下のアーム、上のアーム、シェードを持つオリジナルのデスクランプを考えます。土台は静止し、アームは関節で回転し、シェードは取り付け部で傾きます。
元のエディターで各部分を分け、レイヤーに分かりやすい名前を付けます。一緒に動かしたい図案は同じ部品に入れます。シェードに塗りと装飾用の輪郭があるなら、両方がシェードの動きに従う必要があります。
予定したポーズに対応できるよう、各部品を十分に描くことも必要です。見えているアームの縁だけを含むSVGでは、シェードを動かしたときに隠れていた図案を補えません。覆われていた領域を手作業で延長する必要があるかもしれません。
図は意図した構成を説明しています。読み込み機能が作るレイヤー数を予測するものではありません。InkscapeのSIF書き出しコードは、パスの塗りとストロークから個別の領域レイヤーと輪郭レイヤーを作れます。元の1部品でも、生成された複数のレイヤーを一緒に動かす必要がある場合があります。
色に基づくトレースも、動きの計画と異なる構成になる場合があります。暗い色のアーム2本が、1つの複合図形の一部かもしれません。見分けられるすべてのオブジェクトに独自のレイヤーがあると思わず、実際に必要な形状を分けます。
小さな直接読み込みの確認を行う
ランプだけを含む受け渡し用コピーを保存し、新しいSynfigドキュメントへFile → Importで読み込みます。アニメーションを付ける前に4つ確認します。
- 全体のシルエットと図案のサイズを、キャンバスに対して比較します。
- レイヤー階層を展開し、アーム1本かシェードを見つけます。
- その部品を一時的に非表示にし、何を含むかを正確に確認します。
- 表示を戻し、一時的に少し動かしてから元に戻します。
シェードを隠すとアームも消えるなら、グループ構成を調べます。シェードを動かすと輪郭が残るなら、その部品を構成するレイヤーをまとめてから進みます。これらの簡単な確認は、完成したアニメーションを作らずに構造を明らかにします。
塗りは形状とは別に確認します。正しい輪郭で塗りが違う問題と、図案が欠ける問題は異なります。色、不透明度、見えるストローク、穴を原版と比較します。原版へ戻れるよう、修正は作業用コピーで行います。
ネイティブの形状が異なるアニメーション形式については、OpenToonzのベクターの手順で、編集可能な塗り領域の境界と編集可能な中心線で、可能な編集操作が異なる理由を説明しています。読み込み機能のレイヤー数だけで、各レイヤーがどの編集に対応するか分かるとは考えないでください。
役立つ場合はInkscapeのSIF書き出しを試す
使用中のInkscapeのSave Asに**Synfig Animation (*.sif)**があるなら、別のSIFコピーを保存し、Synfigで開きます。編集可能なSVGの原版は残します。SynfigのInkscape変換ガイドは、この方法と、InkscapeレイヤーとSynfig Group Layersの関係を説明しています。
現在の書き出し機能の実装も、Inkscapeレイヤーを、変換した内容を入れる名前付きのコンテナーとして扱います。ランプでは、目的を持った元のレイヤーが役立ちますが、それでも結果の確認は必要です。通常のSVGグループとInkscapeレイヤーを、最終階層について同じ保証があるものとして扱うことはできません。
同じ確認を使って、SIFコピーと直接読み込みを比較します。シェードを選択できますか。塗りと輪郭は一緒に動きますか。重なりは保たれていますか。どの拡張子がネイティブらしく聞こえるかではなく、その結果で選びます。
古い互換性一覧を普遍的な規則にしないでください。SynfigのWikiには、独自の制限がある古いXSLT変換方法が含まれています。その制限が、そのまま直接のSVG読み込みや現在のInkscapeの書き出し機能を説明するとは限りません。問題のあるファイルでは、コピーをシンプルな塗りの図形へ減らし、複雑な機能を1つずつ戻します。
動作を試す前にグループの原点を設定する
SynfigのGroup Layerのドキュメントは、子レイヤーをまとめて変換するコンテナーを説明しています。変換設定には、回転、オフセット、スキュー、縮尺があります。ランプの1つの可動部品に属する部分をグループ化してから、回転を試します。
意図した関節の位置へ回転中心を置きます。Group Transformation Widgetの説明によると、Ctrlを押しながら変換中心をドラッグすると、グループとは独立してOriginを変えられます。アニメーションを付ける前に、選択したグループへの影響を確認してください。
シェードでは、シルエットの中央を中心にする動きと、アームの取り付け部を中心にする動きは異なります。作業用コピーで少し回転してみます。離れた輪郭、関節の隙間、誤った点を中心に動く図案がないかを確認し、試した操作を元に戻します。
これで編集の出発点ができます。親子の動き、ボーン、タイミング、補間は別に設定する必要があります。SVGの読み込みやSIFの書き出しが、平らなイラストから既存のリグを復元するわけではありません。
何も表示されない場合や色が変わる場合
症状で調査を絞ります。
| 症状 | 最初の確認 |
|---|---|
| 何も見えない | レイヤー表示、図案の境界範囲、キャンバスの縮尺、元データに使える形状があるか |
| 輪郭は見えるが塗りが違う | 元の塗り、不透明度、読み込んだ塗りレイヤー |
| 一部が消える | 切り分けたコピーで試す、欠けた部分の構造や効果 |
| すべて一緒に動く | 選択したグループと、その中の部品 |
| 部品の輪郭が残る | 動きに合わせて塗りと輪郭のグループ化が必要か |
空白のSVGの診断は、表示領域、可視性、非対応内容の確認を扱っています。診断中も良いパスは残します。図案全体をPNGに変換して再トレースすると、まだ使える構造を失います。
Synfigのバージョン、使った場合はInkscapeのバージョン、選んだ読み込み方法、問題を再現する小さなファイル1つを記録します。色やグループ化に関する古いフォーラムの報告は調査の手掛かりであり、現在のすべての環境で同じ問題がある証拠ではありません。
PerfectVectorが担当する部分
フラットなPNGやJPGのイラストしかないなら、PerfectVectorの画像からベクターへの手順で、Synfigへの受け渡し前に編集可能なSVGパスを再構築できます。シルエットを調べ、動かす予定の領域を分けてから、1回の読み込みを試します。その結果にも、Synfigでのレイヤー整理、関節の配置、アニメーション設定が必要です。
既存の編集可能なSVGは、そのスクリーンショットをトレースせずに残します。描いた背景は、質感が重要で位置や移動だけが必要なら、ラスターのまま使えます。Synfigには画像内容用のImport Image Layerが別に説明されています。異なる標準のトレース手順はAdobe Animateの画像トレースをご覧ください。より広いベクター化の解説では、パスの復元と元のデザイン構造の復元を区別しています。
よくある質問
SynfigでSVGファイルを読み込めますか？ はい。File → Importを使い、見える図案と生成されたレイヤー構造を確認します。Synfigのドキュメントには、直接の読み込みで使いやすく再現できない場合の代替として、InkscapeからSIFを経由する方法もあります。
SynfigのアニメーションにはSVGとSIFのどちらを使うべきですか？ SVGの原版を残し、Inkscapeで選択肢を使える場合は、直接読み込みと別のSIF書き出しを比較します。見た目と編集可能な部品がアニメーションに合う結果を選びます。どちらもリグを自動で作るものではありません。
SynfigでSVGが空白になったり色が違ったりするのはなぜですか？ 表示、境界範囲、縮尺、塗り、不透明度、欠けた部分の構造を確認します。簡単なコピーで試し、ファイル固有の機能と、より広い読み込みの問題を分けます。原版を残し、アプリのバージョンと読み込み方法を記録してください。
SVGを読み込むと、個別に動かす部分が作られますか？ そうなると思い込まず、実際のレイヤーを調べます。元の1部品から複数の塗りレイヤーができる場合も、見える複数の部分が形状を共有する場合もあります。各可動部品を整理し、原点を設定し、少し動かしてからアニメーションを付けます。
参考資料
- Synfig — SVG読み込みとInkscape変換 — 直接読み込みと代替のSIF経由の方法、過去の変換方式の説明。
- Inkscape — Synfig出力拡張の定義 — SIF出力形式の登録と、書き出しで情報が失われる可能性の表示。
- Inkscape — Synfig書き出し機能の実装 — レイヤーコンテナーの扱いと、塗り・輪郭の個別変換。
- Synfig — Group Layer — グループ内レイヤーの変換とパラメーターの定義。
- Synfig — Group Transformation Widget — 図案とは独立してグループのOriginを調整する方法。
- Synfig — Import Image Layer — 読み込んだ画像内容用の独立したレイヤーの説明。
ラスター図案から始めるなら、PerfectVectorでSVGパスを準備し、動かしたい領域を確認して、残りのアニメーションを作る前にSynfigで1つの部品を試してください。
