Illustratorを利用してSVGを最適化

Adobe® Illustrator®で「単純化」「フォント埋め込み」「gzip圧縮」などのコントロールを利用して、書き出したSVGのファイルサイズを最適化するようにカスタマイズすることができます。 これらのコントロールは、Illustratorを使ってできる限り能率的なファイルを制作するために利用するとよいでしょう。

複雑な画像（特に 、オートトレースした画像や、Adobe Streamline™やAdobe Dimensions®など別のアプリケーションから取り込んだ画像の場合）は、書き出す前にパス単純化フィルタを通す必要があります。ベクター・ポイントが少なければ、それだけSVGファイル全体の文字数も少なくなるからです。

ユーザのシステムにインストールされていない可能性のあるフォントを指定して、表示させたい場合には、フォントの埋め込みを利用します。さもなければロゴの場合のように、テキストをアウトラインに変換しなければなりません。埋め込みフォントを作成する際には、常に「できるだけ小さく」のオプションを選択しなくてはなりません（詳しくは、テキストレッスンを参照）。「すべての絵文字」オプションはなるべく使わない方がいいでしょう。また、同じフォントを利用するSVGファイルを複数制作する場合には、複数のサブセット・フォントを作成する代わりに、すべてのファイルが参照することのできる１つのフォントを作成します。このフォントはクライアント・サイドにキャッシュされますから、１度ダウンロードすればすべてのドキュメントに対して、速やかに適用されます。

Gzip圧縮は、Illustrator SVG Formatプラグインの最新リリースに取り入れられた、最新のオプションです。これを利用すると、SVGファイルのサイズをかなり圧縮することができます。現在の仕様での圧縮率は次の通りです。

このほかの最適化の方法

Illustratorを使わずに、SVGファイルを手動で最適化する方法が数多くあります。

• すべての属性やプロパティを明確に指定せずに、デフォルト値を使う。
• パス・データ圧縮機能で相対座標を利用する。水平線、鉛直線にはh およびvを利用し、立方体および二次ベジェ・セグメントにはできる限りsまたは tを使う。外側の白いスペースやセパレータを削除する。
• ドキュメント中に同じグラフィックが何度も現れる場合に、シンボルを利用する。
• CSSのプロパティ継承とセレクタを使って、共通して使われるプロパティを名前付きのスタイルに統合したり、プロパティを親<g>エレメントに割り当てる。
• フィルタ効果を使い、クライアントサイド・グラフィックス・オペレーション経由で、グラフィックスの描画を助ける。

最適化されていないSVG 3.64 kb	最適化されたSVG (<use>, gzip) 0.99 kb
JPEG（中程度の画質） 9.62 kb	GIF（256色） 12.77 kb

次のレッスン：ビュワーのオートインストール