Animate での SVG ファイルの操作

SVG とは

Scalable Vector Graphics（SVG）は、2 次元のイメージを記述する XML マークアップ言語です。SVG ファイルは、解像度に依存しない HiDPI グラフィックを、コンパクトな形式で、Web、プリントおよびモバイルデバイスに提供します。SVG は、CSS でスタイルを設定でき、スクリプトとアニメーションをサポートすることで、Web プラットフォームに欠かせないものとなっています。

GIF、JPEG、PNG など、Web の一般的な画像形式は、ファイルサイズが大きく、通常、低解像度です。SVG 形式は、ベクターシェイプ、テキスト、フィルター効果という単位でイメージを記述できることで、より多くの価値を提供します。SVG ファイルはコンパクトで、Web およびリソースに制限のあるハンドヘルドデバイスにも、高画質のグラフィックを提供します。シャープネス、ディテール、明瞭度を妥協することなく、画面上で SVG 画像を拡大表示できます。さらに、SVG はテキストとカラーのサポートに優れているので、ステージに表示されているのと同じイメージが確実に表示されます。SVG 形式は XML に準拠しているので、開発者にとっても他のユーザーにとっても多くの利点があります。

不要な定義や ID が作成されることなく、Animate から SVG ファイルを書き出すことができるようになりました。Animate 19.1 リリースでは、SVG のコンポジションが強化されました。この書き出しオプションは、Character Animator に読み込まれた SVG の品質を向上させます。

Animate での SVG の書き出しワークフロー

Animate では、SVG 形式（バージョン 1.1）に書き出すことができます。Animate 内の強力なデザインツールを使用して視覚的にリッチなアートワークを作成し、それを SVG に書き出すことができます。

Animate では、アニメーションのフレームおよびキーフレームを選択して書き出すことができます。また、書き出されたアートワークはベクターなので、異なるサイズに拡大／縮小しても画像は高解像度のままです。

SVG 書き出し機能は、以前の FXG 書き出しに代わるものです。FXG 書き出しは、Animate から削除されました（2013 年 6 月）。SVG 書き出し機能のパフォーマンスとその出力の品質は、はるかに優れています。また、FXG と比較すると、SVG のコンテンツの損失は最小限です。

フィルターエフェクトを使用したアートワーク

Animate と SVG で使用可能なフィルターは 1 対 1 のマッピングでないので、SVG のフィルター効果は、Animate と厳密に一致しないことがあります。ただし、Animate では、SVG 内で使用できる様々なプリミティブなフィルターの組み合わせを活用して、同様の効果をシミュレートします。

複数のシンボルの処理

SVG 書き出しは、コンテンツを損失することなく、複数のシンボルをシームレスに処理します。出力は、Animate 内のステージ上のアートワークに非常に似ています。

SVG 形式でのアートワークの書き出し

Animate で、再生ヘッドを適切なフレームにスクラブまたは移動します。
ファイル／書き出し／イメージの書き出しを選択します。または、ファイル／パブリッシュ設定を選択します（「その他の形式」セクションで「SVG イメージ」オプションを選択します）。
SVG ファイルの保存先を入力するか、参照して指定します。「名前を付けて保存」の形式に SVG が選択されていることを確認してください。
「OK」をクリックします。
SVG に書き出しダイアログで、SVG ファイルへの「埋め込み」または「リンク」を選択します。
- 非表示レイヤーを含める：Animate ドキュメントのすべての非表示レイヤーが書き出されます。「非表示レイヤーの書き出し」をオフにすると、ムービークリップ内でネストされているレイヤーを含めて、非表示になっているすべてのレイヤーは、作成される SVG に書き出されません。レイヤーを非表示にすることによって、Animate ドキュメントの各バージョンを簡単にテストできます。
- 埋め込み：ビットマップを SVG ファイルに埋め込みます。ビットマップを SVG ファイルに直接埋め込む場合は、このオプションを使用します。
- リンク：ビットマップファイルのパスのリンクを設定します。ビットマップを埋め込まず、ビットマップへのリンクを SVG ファイルから指定する場合は、このオプションを使用します。「フォルダーにイメージをコピー」オプションを選択した場合、ビットマップは、SVG ファイルを書き出した場所に作成される images フォルダー内に保存されます。「フォルダーにイメージをコピー」オプションが選択されていない場合、ビットマップは SVG ファイル内で、元のソースの場所から参照されます。ビットマップのソースの場所にアクセスできない場合は、ビットマップは SVG ファイル内に埋め込まれます。
- /Images フォルダーにイメージをコピー：ビットマップを /Images にコピーできます。/Images が存在していない場合は、SVG の書き出し先に作成されます。
- Character Animator 用に最適化：Character Animator で適切に機能する SVG を書き出しできます。

「OK」をクリックします。

SVG 形式では、一部の Animate 機能がサポートされていません。サポートされていない機能を使用して作成したコンテンツは、書き出し時に削除されるか、デフォルトのサポートされる機能に置き換えられます。

または、パブリッシュ設定ダイアログ（ファイル／パブリッシュ設定）を使用して、Animate 内から SVG ファイルを書き出すこともできます。SVG ファイルを書き出すには、「その他の形式」セクションから「SVG」オプションを選択します。

SVG は、最新のアップデートを適用したモダンブラウザーでのみ表示することをお勧めします。グラフィックフィルターやカラー効果の一部は Internet Explorer 9 などの以前のバージョンでは正しくレンダリングされない場合があるからです。

Adobe Illustrator との SVG ファイルのやり取り

Animate では、Adobe Illustrator とのコンテンツのやり取りが可能です。このワークフローは、Animate（13.0）で削除された FXG 書き出し機能に代わるものです。Animate から SVG ファイルを書き出して、Adobe Illustrator で読み込むことができます。Adobe Illustrator 内での SVG ファイルの使用について詳しくは、このヘルプトピックを参照してください。

アートワークに微細な編集を加えてディテールを磨きたい場合に、このワークフローを使用します。また、Illustrator を使用して、アートワークにドロップシャドウなどの効果を加えることもできます。

Adobe Illustrator で SVG ファイルを編集して、編集済みのコンテンツを Animate で使用するには、次の操作を行います。

Animate で、SVG に書き出します。
Adobe Illustrator を使用して SVG ファイルを開き、アートワークを編集します。
SVG ファイルを .ai ファイルとして保存し、Animate に読み込みます。Animate 内での Illustrator ファイルの使用については、こちらを参照してください。

SVG ファイルの書き出し