Webやモバイルに適した軽量の最新SVGを書き出す方法を説明します

黄色い花の上に乗り、タンポポの種をハサミでつかむ黒いクワガタが描かれた抽象アート。空はオレンジ色の渦巻きのようなデザイン

Illustrator CC 2015以降のバージョンでは、まったく新しい方法で効率的な最新SVGコードを生成できます。SVGコードを書き出すための新しいオプションでは、webとモバイルワークフローのサポートが改善されており、高品質なSVGアートワークを作成できます。 

以下の機能改善があります。

  • 新規書き出しオプション - 簡単に編集できるプレーンなSVGコードの書き出し、コードサイズを削減する縮小されたSVG、オブジェクトID
  • シェイプ、グラデーション、パターン、シンボル、マスクされたオブジェクトなど、SVGアートオブジェクトの出力を高品質化
  • テキストをアウトライン化し、サイズを縮小するなどのテキスト処理機能の強化
  • アートボードの書き出しおよび境界線ボックスにおけるトリミング機能の強化
  • デザインごとに個別のコンポーネントを書き出す機能
  • 透明効果と描画モードの完全サポート

 

音楽アプリのメニューには再生、一時停止、Like、シャッフルのオプションが表示されている。SVGコードのオプションでは、より多くのwebアプリやモバイルアプリをサポートしている

アートをSVGに書き出す

アートワークをSVGとして保存するには、ファイル/書き出し/書き出し形式を選択して「ファイル形式」に「SVG(svg)」を選択します。

アートボードのコンテンツを個別のSVGファイルとして保存するには、「アートボードごとに作成」のチェックボックスをオンにします。「書き出し」をクリックして、SVGのオプションダイアログを開きます。

注意:「アートボードごとに作成」がオフになっていると、異なるアートボード上にあるオブジェクトすべてを1つのアートワークとして、SVGファイルのビューポートが設定されます。

ファイル/書き出しでSVGのオプションを選択すると、IllustratorファイルをSVG形式に書き出せる

個々のコンポーネントを書き出す

SVGの書き出しでは、アートボード全体ではなく、個々のコンポーネントやデザインのセクション全体を書き出すこともできます。 

デザインのセクションまたはコンポーネントをSVGに書き出すには、目的のオブジェクトを選択して、ファイル/選択範囲を書き出しを選択して「ファイル形式」に「SVG(svg)」を選択します。

アートボードの音符のアイコンだけが選択されている。ハイライト表示されたファイル/選択範囲を書き出しで、アイコンのみの書き出しをおこなう

SVGオプションを指定する

「SVGオプション」で、スタイル、フォント、その他の項目に対して、アートワークに適した設定を選択します。

「縮小」チェックボックスをオンにすると、ID、インデント、行、余白が最小限のSVGコードが生成されます。

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

SVGオプションについて詳しくは、「SVG」を参照してください。

注意:SVGコードの書き出し後に、再度、編集したい場合には、Illustratorで書き出したSVGを開くのではなく、元のIllustrator(.ai)ドキュメントを開き、もう一度SVGに書き出してください。

SVGオプションのメニューから、SVGに書き出したファイルのカスタマイズができる

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト