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

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

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

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

 

1. アートをSVGに書き出す

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

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

注意:「アートボードごとに作成」がオフになっていると、ドキュメント内のオブジェクトをすべて合わせた領域で、SVGファイルのビューポートが設定されます。

2. 個別のコンポーネントを書き出す

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

デザインのセクションまたはコンポーネントをSVGに書き出すには、それを選択して、ファイル/選択範囲を書き出し/SVG(svg)の順に選択します。

3. SVGのオプションを入力する

「SVGオプション」で、CSS、フォント、その他のメニューからアートワークに適した設定を選択します。

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

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

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

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

 

これですべての作業が終わりました。チュートリアルをさらに役立つものにするために、アンケートにご協力ください。

 

12/19/2016

Contributor: Wren Sauer

このページは役に立ちましたか。
はい
いいえ