この文書では、Adobe Illustrator でアートワークを SVG 形式で書き出す方法について説明します。

A. SVG 形式について

SVG とはベクトル形式によって画像を描画する方式で、高品質のグラフィックで、かつファイルサイズが小さいのが特徴です。SVG 形式のグラフィックは、画像品質を維持したまま、画面上で拡大縮小を行うことができます。SVG で保存する際、メッシュオブジェクトがラスタライズされます。 また、アルファチャンネルを含まない画像は、JPEG 形式に変換され、 アルファチャンネルがある画像は PNG 形式に変換されます。
SVG と SVG 圧縮(SVGZ)との 2 つの保存形式があり、 SVGZ はファイルサイズを 50 ~ 80 %小さくできますが、テキストエディターで編集できません。
Illustrator では、携帯端末に特化した SVG-t (SVG-Tiny) 形式での書き出しにも対応しています。また SVG 形式は XML に準拠しているため、開発者とユーザの両方に多くのメリットがあります。
※ SVG についてもっと詳しく知りたい場合は、ヘルプの「SVG について」を参照してください。

B. アートワークを SVG 形式で書き出す方法

  1. Illustrator でアートワークを作成します。
  2. ファイル/保存 を選択します。
    ※ ファイル/別名で保存 または、複製で保存 でも同様に保存できます。

  3. 書き出しダイアログボックスの「ファイル形式」で「SVG」または「SVG 圧縮」を選択します。

  4. 保存先とファイル名を指定し、「保存」ボタンをクリックします。
  5. SVG オプションダイアログボックスで設定を行い、「OK」をクリックします。
    ※ 「詳細オプション」ボタンをクリックすると、さらに設定項目が表示されます。



    SVG プロファイル : 文書型定義(SVG XML DTD)を指定します。
    文字 : テキストの保存形式を指定します。
    サブセット : ファイルに埋め込む文字を指定します。
    参考方法 : ラスタライズされた画像を埋め込むか、リンク配置にするかを指定します。画像を埋め込むとファイルサイズがその分大きくなりますが、画像は閲覧環境に依存せずに必ず表示されるようになります。
    Illustrator の編集機能を保持 : AI ファイルを SVG ファイルに埋め込むことによって、Illustrator 固有のデータを保持します。そのため、このオプションを有効にするとファイルサイズは大きくなりますが、後から Illustrator で修正を加えることができます。
    CSS プロパティ : SVG コードのスタイル属性をどのように保存するか指定します。「プレゼンテーション属性」を指定すると、階層構造の最上位のプロパティが適用されます。「スタイル属性」を選択するとファイルの読みやすさは向上しますが、ファイルサイズは大きくなります。「スタイル属性 (実体参照)」を選択するとレンダリングに要する時間が短縮され、ファイルサイズも小さくなります。「スタイル要素」は、HTML 文書と共有する場合に使用します。
    小数点以下の桁数 : ベクトルデータの精度を指定します。1 ~ 7 の範囲で値を指定することができます。指定した値が大きいほど画質が向上しますが、ファイルサイズは大きくなります。
    エンコーディング : 文字のエンコード方法を指定します。
    Adobe SVG Viewer 用に最適化 : このオプションを有効にすると、データの品質を保ったまま、SVG ファイルを手動で編集することができます。
    Adobe Graphics Server データを含める : 変数を使用したデータ駆動型グラフィックを作成した場合、変数の置換に必要な情報をすべて含めて書き出します。
    スライスデータを含める : スライスの位置と最適化設定を含めて書き出す際に有効にします。
    XMP を含める : XMP メタデータを含めた SVG ファイルを書き出す際に有効にします。XMP メタデータの内容は Adobe Bridge で参照、編集が可能です。
    <tspan> エレメントの出力を制御 : 自動カーニングの設定を無視して書き出しを行います。
    パス上テキストに <textPath> エレメントを使用 : <textPath> エレメントを使用してパス上のテキストを書き出します。
    SVG コードを表示 : ブラウザを起動し、SVG ファイルのコードを表示します。
    Webプレビュー : ブラウザを起動し、SVG ファイルをプレビューします。

  6.  アートワークが SVG 形式で保存されます。

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

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