Webやモバイルに適した軽量の最新SVGを書き出す方法を説明します
Illustrator CC 2015以降のバージョンでは、まったく新しい方法で効率的な最新SVGコードを生成できます。SVGコードを書き出すための新しいオプションでは、webとモバイルワークフローのサポートが改善されており、高品質なSVGアートワークを作成できます。
以下の機能改善があります。
- 新規書き出しオプション - 簡単に編集できるプレーンなSVGコードの書き出し、コードサイズを削減する縮小されたSVG、オブジェクトID
- シェイプ、グラデーション、パターン、シンボル、マスクされたオブジェクトなど、SVGアートオブジェクトの出力を高品質化
- テキストをアウトライン化し、サイズを縮小するなどのテキスト処理機能の強化
- アートボードの書き出しおよび境界線ボックスにおけるトリミング機能の強化
- デザインごとに個別のコンポーネントを書き出す機能
- 透明効果と描画モードの完全サポート
アートをSVGに書き出す
アートワークをSVGとして保存するには、ファイル/書き出し/書き出し形式を選択して「ファイル形式」に「SVG(svg)」を選択します。
アートボードのコンテンツを個別のSVGファイルとして保存するには、「アートボードごとに作成」のチェックボックスをオンにします。「書き出し」をクリックして、SVGのオプションダイアログを開きます。
注意:「アートボードごとに作成」がオフになっていると、異なるアートボード上にあるオブジェクトすべてを1つのアートワークとして、SVGファイルのビューポートが設定されます。
個々のコンポーネントを書き出す
SVGの書き出しでは、アートボード全体ではなく、個々のコンポーネントやデザインのセクション全体を書き出すこともできます。
デザインのセクションまたはコンポーネントをSVGに書き出すには、目的のオブジェクトを選択して、ファイル/選択範囲を書き出しを選択して「ファイル形式」に「SVG(svg)」を選択します。
SVGオプションを指定する
「SVGオプション」で、スタイル、フォント、その他の項目に対して、アートワークに適した設定を選択します。
「縮小」チェックボックスをオンにすると、ID、インデント、行、余白が最小限のSVGコードが生成されます。
「OK」をクリックします。
SVGオプションについて詳しくは、「SVG」を参照してください。
注意:SVGコードの書き出し後に、再度、編集したい場合には、Illustratorで書き出したSVGを開くのではなく、元のIllustrator(.ai)ドキュメントを開き、もう一度SVGに書き出してください。