SVG ファイルの書き出し

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

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 形式でのアートワークの書き出し

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

  1. 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 で使用するには、次の操作を行います。

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

アドビのロゴ

アカウントにログイン