画像コンテンツをモバイルデバイス向けに最適化するには、Illustrator で作成したアートワークを SVG-T などの SVG 形式で保存します。SVG-T は、特にモバイルデバイス向けに設計されています。
以下のヒントを使用して、Illustrator で作成した画像がモバイルデバイスで適切に表示されるようにします。
SVG 標準を使用してコンテンツを作成します。 SVG を使用してモバイルデバイスにベクトル画像を読み込ませると、ファイルサイズが小さくなり、表示環境に依存しません。また、カラー制御に優れ、拡大縮小、そしてソースコードのテキスト編集が可能になります。 その上、SVG は XML ベースなので、ハイライト、ツールチップ、特殊効果、オーディオ、アニメーションなどのインタラクティビティを画像に組み込むことができます。
最初から、対象モバイルデバイスに合わせた表示可能なサイズで作業を行います。 SVG は拡大縮小できますが、正しいサイズで作業することによって、最終的な画像の品質およびサイズが対象デバイスに最適化されます。
Illustrator のカラーモードを RGB に設定します。 SVG は、モニタなどの RGB ラスタ表示デバイスで表示されます。
ファイルサイズを縮小するには、オブジェクト(グループを含む)の数を減らすか、複雑なオブジェクトを避け単純化(ポイントを少なく)します。 使用するポイントを減らすと、SVG ファイルのアートワークを記述するテキスト情報の量が大幅に減少します。 ポイントを減らすには、オブジェクト/パス/単純化を選択し、様々な組み合わせを試して、品質とポイント数のバランスを見つけます。
可能であればシンボルを使用します。 同じシンボルであれば複数使用しても、ベクトルで記述されたオブジェクトは一度定義されるだけです。 再利用されるボタンの背景のようなオブジェクトがアートワークに含まれている場合に有用です。
画像をアニメーション化する場合、使用するオブジェクトの数を制限し、オブジェクトをできるだけ再利用して、ファイルサイズを縮小します。 個別のオブジェクトではなくオブジェクトのグループにアニメーションを適用して、コードの繰り返しを避けます。
SVGZ の使用を検討します。これは、SVG の gzip で圧縮されたバージョンです。 コンテンツによっては、圧縮によってファイルサイズは大幅に縮小されます。 通常、テキストは大幅に圧縮されますが、埋め込まれたラスタライズファイル(JPEG、PNG または GIF ファイル)などのバイナリエンコードされたコンテンツの場合はあまり圧縮されません。 SVGZ ファイルは、gzip で圧縮されたファイルを展開するアプリケーションによって圧縮解除できます。 SGVZ を正常に使用するには、対象モバイルデバイスが gzip ファイルを圧縮解除できることを確認します。