Apple MotionにSVGをインポート：動かす前に確認する

Apple MotionはSVGのインポートに対応しています。AppleのMotion 6.3の機能ガイドにSVG対応が記載されているため、すべてのSVGを別形式に変換するよう案内する古い情報は、このバージョンでの確かな出発点にはなりません。静的ファイルから始め、メディアとして取り込み、アニメーションを組む前に結果を確認します。

答えるべき問いは三つあります。アートワークは表示されるか、透明部分は正しいか、独立して動くべき部品を制御できるかです。キャンバスにグラフィックが現れるだけで分かるのは最初の問いだけです。各SVGパスがMotion本来のシェイプになったことは確認できません。

この手順では、単純なリングと円盤の紋章で確認箇所を見えるようにします。使用中のバージョンで試すための資料に基づく手順であり、Motionでのインポートテストの報告ではありません。

Motionのバージョンと用途に手順を合わせる

古いフォーラムの記事に従ったり、大量のファイルを取り込んだりする前に、インストール済みのバージョンを確認します。Appleの現在のSVGガイドは、対応用途と具体的な制限を説明しています。記載のバージョンと異なる場合は、アートワーク自体を診断する前に一致するガイドを確認してください。

インポート後に必要な動作を決めます。

最後の行は特に重要です。MotionのSVG資料では、アニメーション付きSVGは最初のフレームだけ表示すると記載しています。アニメーションファイルの取り込みと、そのアニメーションの取り込みは同じではありません。

アニメーションアプリを選ぶ場合、After EffectsのロゴトレースガイドとAdobe Animateのトレース手順は、それぞれの出力先のオブジェクトを説明しています。コマンドやオブジェクトの種類はMotionのメディアインポートと交換できません。

確認できる元データから始める

この独自の例をorbit-mark.svgとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
  <circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
  <circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>

青緑色のリングは中央が空いています。小さなサンゴ色の円盤は右上にあり、隙間で離れています。背景の長方形、文字、外部画像参照、スクリプト、アニメーションはありません。この選択によって、後で複雑な紋章を確認するための有用な基準になります。

まず元のエディターで開き、リングの穴、隙間、キャンバスの境界を確認します。アートワークの修正とインポート設定の修正は別なので、編集可能なマスターを保持します。

自身のファイルでは、特定の機能が問題を起こす箇所だけ受け渡し用コピーを単純化します。文字があるデザインには明確なフォント方針が必要です。書き出し前にSVGのフォント変更チェックリストを使います。コピーにアウトライン化した文字が必要でも、マスターでは編集可能なテキストを保持します。出力先アプリが違うという理由だけで、すでに使えるベクターをトレースしないでください。

コンポジションに取り込み、メディアを確認する

紋章を置くグループを選びます。現在のMotionのインポート手順では、File > Import > Mediaを選ぶかCommand-Iを押し、SVGを選んで取り込みます。FinderからキャンバスやLayersリストのグループにドラッグすることもできます。

取り込み後、キャンバスのグラフィックと、目的のグループ内のレイヤーを確認します。Mediaリストに名前が出たことだけで判断しないでください。Appleは、コンポジションに追加せずそのリストだけへインポートする方法も説明しています。その場合、まだキャンバスやLayersリストには現れません。

確認のため対照的な背景に紋章を置きます。中央の穴と二つの部品の間の空間を見ます。暗いビューアー背景では、内容が欠けている状態と透明な状態が紛らわしく見える場合があります。

Motionの背景置換を確認するには、ProjectペインのMediaをクリックしてSVGオブジェクトを選び、Media Inspectorを開きます。AppleのSVGのページは、Use Background Colorと関連する色の設定を説明しています。元の透明部分を保持したいなら置換を無効にし、代替色が意図したものの場合だけ有効にします。

SVG内に描かれた不透明な長方形は別の問題です。メディアの背景設定を無効にしても、アートワークのパスは削除されません。SVGの透明背景ガイドは元データ側の診断を扱っています。

キーフレームを追加する前に部品の制御を試す

取り込んだ紋章を選び、戻せる小さな位置変更をします。リングと円盤が一緒に動くなら、一つのグラフィックとして有用な動作です。元の位置に戻し、予定するアニメーションにさらに制御が必要か考えます。

円盤を独立して動かすには、その部分だけを選択して移動してみます。リングがその場に残り、意図したオブジェクトを独立して扱える場合だけ受け渡しを合格にします。SVGのグループ名、目に見える隙間、レイヤーのサムネイルだけでは十分な証拠になりません。

利用できるオブジェクトが必要な制御を提供しないなら、提供できる構成を選びます。この単純な例では、リングと円盤を別々のネイティブシェイプとして描く方法が妥当です。Appleの単純なシェイプのガイドはCircleツールと色、輪郭の設定を説明しています。リングは塗りなしの輪郭、円盤は単色の塗りで作り、各オブジェクトの選択を個別に確認します。

複雑なアートワークでは、独立して動く部品ごとに別の元ファイルを準備する選択肢もあります。共通のキャンバスを保ち、元のエディターで意図した位置合わせを記録します。取り込み後に配置を確認してください。ファイルの集合が自動でアニメーション用の配置になるわけではありません。

これは必要なオブジェクトについての判断であり、SVGインポートでネイティブシェイプに分解されるという約束ではありません。点単位の変形が必要なら、アニメーションに取り組む前に、選んだ構成が必要な形状制御を提供するか確認します。

単純なコピーで非対応の内容を診断する

AppleのSVGの制限は、元のエディターと結果が異なる理由をいくつか示しています。症状で次の確認を選びます。

外部参照の制限から、あらゆる自己完結型SVG機能が動くと判断しないでください。小さな基準ファイルは依存関係の切り分けに役立ちますが、最終的なアートワークにも独自の確認が必要です。

静的な外観が正しくなったら、コンポジションで使う最小と最大のサイズで確認します。リングの内側の穴と円盤の横の隙間を見ます。次に、短い区間を書き出し、目的の納品解像度で確認します。元の形状がベクターでも、合成、効果、最終的な動画フレームの確認は必要です。

ラスターだけの紋章をMotion用に準備する

編集可能な紋章がなく、単純なPNGやJPGしか残っていないなら、PerfectVectorの画像からベクターへのワークフローで静的なSVG候補を準備できます。紋章に合わせて切り抜き、埋まったリングの穴、結合した円盤、不要な背景形状をプレビューで確認し、元画像と比較します。採用したアートワークをダウンロードし、取り込みと独立したオブジェクトの確認を繰り返します。

ベクター化はキーフレーム、タイミング、Motion本来のレイヤー、アニメーションリグを復元しません。既存のベクターマスターがあれば使います。写真や効果の多い画像は外観を保ちやすければラスターのままにします。ネイティブオブジェクトの制御が本当の要件なら、単純なリングと円盤をMotionで直接描きます。

他の人に渡す前に、元ファイル名、Motionのバージョン、背景の選択、別々に保つべき要素を記録します。編集可能なマスターと、目的の配置を示す参考図も含めます。ブログのアートワーク手順は、その受け渡し前の準備判断を扱っています。

よくある質問

Apple MotionはSVGを直接インポートできますか？ はい。AppleのMotion 6.3の資料にSVG対応が記載されています。使用中のバージョンの手順で取り込み、アートワークと必要な制御を確認します。

SVGをインポートするとアニメーションも保持されますか？ いいえ。MotionはアニメーションSVGの最初のフレームだけ表示します。そのフレームが透明なら、空に見える場合があります。

MotionでSVGに色付き背景があるのはなぜですか？ Media InspectorのUse Background Colorと、元データの不透明な背景形状を確認します。メディアの背景設定とSVG内に描かれた長方形は別の原因です。

SVGの各パスは編集可能なMotionシェイプになりますか？ 取り込み成功だけでそう考えないでください。必要な部品と形状制御が使えるか試します。独立した制御が必要なら、別のオブジェクトを準備するか、適切なネイティブの構成を使います。

参考資料

1. Apple — Motionの新機能 — Motion 6.3の資料に記載されたSVG対応。
2. Apple — MotionでSVGファイルを使う — 透明部分の制御とSVG機能の制限。
3. Apple — Motionへのメディアのインポート — メディアの取り込み、グループへの配置、Mediaリストだけへの取り込み。
4. Apple — Motionで単純なシェイプを描く — 単純な形状を独立して制御するためのネイティブな代替方法。

シーケンス全体を準備する前に、一つの紋章の外観とオブジェクト構造を確認します。ラスターしか残っていなければ、静的なSVG候補を準備し、別々の部品を確認して、動かす前にMotionで採用ファイルを検証してください。