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 CC での SVG の書き出しワークフロー

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

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

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

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

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

複数のシンボルの処理

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

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

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

注意:

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

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

注意:

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

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

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

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

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー