SVG

SVG は、シェイプ、パス、テキスト、フィルター効果を使用して画像を描画するベクトル形式です。 SVG 形式のファイルはサイズが小さく、web 上でも、印刷する場合でも、さらにはリソースに制約のある携帯機器でも高品質なグラフィックが得られます（サイズの大きい GIF、JPEG、WBMP、および PNG とは異なります）。ユーザーは、鮮明さ、明瞭さ、ディテールを犠牲にすることなく、画面上で SVG 画像を拡大表示できます。さらに、SVG 形式はテキストとカラーの表示にも優れているため、Illustrator のアートボードに表示されているのと同じ画像がユーザー側でも確実に表示されます。

SVG 形式は XML に準拠しているため、開発者にも、ユーザーにも多くの利点があります。 

「保存」、「別名で保存」、「複製を保存」、「Web およびデバイス用に保存」の各コマンドで、アートワークを SVG 形式で保存できます。SVG 書き出しオプションをすべて使用するには、「保存」、「別名で保存」、「複製を保存」の各コマンドを使用します。 「Web およびデバイス用に保存」コマンドの場合は、web 用のアートワークに適用される SVG 書き出しオプションしか使用できません。

SVG 効果の適用

SVG 効果（フィルター）を使用して、ドロップシャドウなどのグラフィック属性をアートワークに追加できます。SVG 効果は、XML に準拠しており、解像度に依存しないという点でビットマップフィルターとは異なります。SVG 効果は、各種の数学的操作を記述する一連の XML プロパティであるといえます。効果はソースグラフィックではなく、ターゲットオブジェクトに対してレンダリングされます。

Illustrator には基本的な SVG 効果が用意されています。デフォルトの効果を直接適用することも、XML コードを編集してカスタマイズすることもできます。新しい SVG 効果を作成することもできます。

デフォルトの効果の適用

カスタム効果の適用

新しい効果の作成と適用

SVG フィルター効果を適用すると、アートボード上にはその結果がラスタライズされて表示されます。このプレビュー画像の解像度を変更するには、効果／ドキュメントのラスタライズ効果設定を修正します。

SVG ファイルからの効果の読み込み

SVG インタラクティビティパネルの概要

SVG インタラクティビティパネルを使用すると、現在のファイルに割り当てられているすべてのイベントや JavaScript ファイルを表示することができます。
Web ブラウザーでの表示用にアートワークを書き出す場合、SVG インタラクティビティパネル（ウィンドウ／SVG インタラクティビティ）を使用してインタラクティビティを追加することができます。 JavaScript コマンドを実行するイベントを定義すれば、web ページ上での動作を簡単に作成できます。例えば、オブジェクト上にカーソルを移動するなど、ユーザーが何らかのアクションを実行したとき、それに対応する動作を作成できます。

SVG インタラクティビティパネルからのイベントの削除

SVG インタラクティビティパネルを使用して、1 つまたはすべてのイベントを削除できます。

ファイルにリンクされたイベントの一覧表示、追加、または削除

「JavaScript ファイルのリンク  」を選択し、「追加」を選択して、JavaScript ファイルを追加します。選択した JavaScript エントリを削除するには、「削除」を選択します。

SVG インタラクティビティのアートワークへの追加

SVG イベント

オブジェクト上にポインターを合わせるなど、オブジェクトにフォーカスが移動したときにアクションが実行されます。

オブジェクトがフォーカスを失ったとき（通常は、他のオブジェクトにフォーカスが移動したとき）にアクションが実行されます。

オブジェクトがマウスでクリックされたとき、またはキーが押されたときに SVG 要素に応じたアクションが実行されます。

オブジェクト上でマウスボタンが押されたときにアクションが実行されます。

オブジェクト上でマウスボタンが放されたときにアクションが実行されます。

オブジェクト上でマウスがクリックされたときにアクションが実行されます。

オブジェクト上にポインターが移動したときにアクションが実行されます。

オブジェクト上にポインターが置かれている間、アクションが実行されます。

オブジェクトからポインターが離れたときにアクションが実行されます。

キーが押されたときにアクションが実行されます。

キーが押されている間、アクションが実行されます。

キーが放されたときにアクションが実行されます。

ブラウザーによる SVG ファイルの解析が完了した時点でアクションが実行されます。このイベントは、1 回限りの初期化関数を呼び出すときに使用します。

オブジェクトを正常に読み込めなかった場合、またはその他のエラーが発生した場合にアクションが実行されます。

オブジェクトの読み込みが完了する前にページの読み込みが中断された場合にアクションが実行されます。

ウィンドウまたはフレームから SVG ドキュメントが削除されたときにアクションが実行されます。

ドキュメントのズームレベルが変更されたときにアクションが実行されます。

ドキュメントの表示画面のサイズが変更されたときにアクションが実行されます。

ドキュメントの表示画面が上下または左右にスクロールされたときにアクションが実行されます。

SVG ファイル作成のヒント

• SVG ファイルに構造を追加するには、レイヤーを使用します。アートワークを SVG 形式で保存すると、各レイヤーはグループ（<g>）オブジェクトに変換されます。（例えば、Button1 という名前のレイヤーは、SVG ファイルでは <g id="Button1_ver3.0"> となります）。ネストされたレイヤーは SVG ネストグループとなり、非表示のレイヤーは SVG スタイルプロパティ「display="none"」とともに保持されます。

• 異なるレイヤー上のオブジェクトを透明にする場合は、各レイヤーの不透明度ではなく、各オブジェクトの不透明度を調整します。

• ラスタライズデータは SVG ビューアでは拡大・縮小できず、その他の SVG オブジェクトのように編集することはできません。SVG ファイルには、ラスタライズされるアートワークを作成しないようにしてください。ラスタライズを発生させずにグラフィック効果を加えるには、SVG 効果を使用します。

• シンボルを使用したり、アートワークのパスを単純化することで、SVG のパフォーマンスを向上できます。また、パフォーマンスを優先する場合は、木炭やスクロールペンなど、大量のパスデータを生成するブラシを使用しないでください。

• スライス、イメージマップ、スクリプトを使用して、SVG ファイルに web リンクを追加できます。

• JavaScript などのスクリプト言語を使用すると、SVG ファイルで様々な機能を実行できます。ポインターやキーボードを操作して、ロールオーバー効果のようなスクリプト関数を呼び出すことができます。

web 向けに最適化された SVG 書き出しオプション

新しい SVG 書き出し（ファイル／書き出し／書き出し形式／SVG）オプションを利用できます。この新たなワークフローによって、web や画面のデザインプロジェクト向けに、標準化され web 用に最適化された SVG ファイルを生成できるようになります。詳しくは、SVG 書き出しオプションを参照してください。

その他の関連ヘルプ

• SVG 形式での保存
• ラスタライズ効果について

ご質問または共有するアイデアがある場合