SVG について

Web 用のビットマップ画像形式(GIF、JPEG、WBMP、PNG)は、縦横に並んだピクセルによって画像を描画します。これらの形式のファイルはサイズが大きく、1 つの解像度(通常は低解像度)にしか対応できないうえ、Web 上でネットワークに負荷をかける傾向があります。一方、SVG は、シェイプ、パス、テキスト、フィルター効果を使用して画像を描画するベクター形式です。SVG 形式のファイルはサイズが小さく、Web 上でも、印刷する場合でも、さらにはリソースに制約のある携帯機器でも高品質なグラフィックが得られます。ユーザーは、鮮明さ、明瞭さ、ディテールを犠牲にすることなく、画面上で SVG 画像を拡大表示できます。さらに、SVG 形式はテキストとカラーの表示にも優れているため、Illustrator のアートボードに表示されているのと同じ画像がユーザー側でも確実に表示されます。

SVG 形式は XML に準拠しているので、開発者にとっても、ユーザーにとっても多くの利点があります。SVG 形式では、XML と JavaScript を使用して高度な Web グラフィックを作成できます。SVG 形式のグラフィックでは、強調表示、ツールチップ、音声、アニメーションなどの洗練された効果を使用してユーザーの操作に応答できます。

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

Illustrator でのアートワークの設定によって、作成される SVG ファイルが異なります。次のガイドラインに従ってください。

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

  • 異なるレイヤー上のオブジェクトを透明にする場合は、各レイヤーの不透明度ではなく、各オブジェクトの不透明度を調整します。レイヤーレベルで不透明度を変更すると、透明表示が SVG ファイルと Illustrator とで異なる結果になります。

  • ラスタライズデータは SVG ビューアでは拡大・縮小できず、その他の SVG オブジェクトのように編集することはできません。SVG ファイルには、ラスタライズされるアートワークをできる限り作成しないでください。ラスタライズ、スタイライズ、ぼかし、アーティスティック、テクスチャ、ビデオ、ピクセレート、ブラシストローク、シャープツール、スケッチ、変形の各効果を適用したグラデーションメッシュとオブジェクトは、SVG 形式で保存するときにラスタライズされます。また、これらの効果を含むグラフィックスタイルもラスタライズされます。ラスタライズを発生させずにグラフィック効果を加えるには、SVG 効果を使用します。

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

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

  • JavaScript などのスクリプト言語を使用すると、SVG ファイルで様々な機能を実行できます。ポインターやキーボードを操作して、ロールオーバー効果のようなスクリプト関数を呼び出すことができます。Document Object Model(DOM)を使用して、SVG ファイルにアクセスし、SVG オブジェクトを挿入したり削除したりして、修正を加えることができます。

SVG 効果の適用

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

Illustrator には基本的な SVG 効果が用意されています。効果を初期設定のプロパティで使用するほか、XML コードを編集してカスタム効果を作成したり、新しい SVG 効果を作成したりできます。

注意:

Illustrator の初期設定の SVG フィルターを変更するには、Documents and Settings¥<ユーザーディレクトリ>¥Application Data¥Adobe¥Adobe Illustrator <バージョン番号> Settings¥<場所> フォルダーにある Adobe SVG Filters.svgファイルをテキストエディターで編集します。既存のフィルター定義の修正、フィルター定義の削除、新しいフィルター定義の追加を行うことができます。

  1. オブジェクトまたはグループを選択するか、レイヤーパネルでターゲットレイヤーを指定します。
  2. 次のいずれかの操作を行います。
    • 初期設定の効果を適用する場合は、効果SVG フィルターを選択し、表示されるサブメニューの下部にある効果を選択します。

    • カスタム設定のフィルターを適用するには、効果SVG フィルターSVG フィルターを適用を選択します。ダイアログボックスで効果を選択し、SVG フィルターを編集ボタン をクリックします。初期設定のコードを編集して、「OK」をクリックします。

    • 効果を新規作成して適用するには、効果SVG フィルターSVG フィルターを適用を選択します。ダイアログボックスで、「SVG フィルターを作成」ボタン をクリックして、新しいコードを入力し、「OK」をクリックします。

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

      注意:オブジェクトに複数の効果を設定する場合、SVG 効果は最後に設定してください。つまり、SVG 効果は、アピアランスパネルの最下部(「初期設定の透明」のすぐ上)に表示されるようにします。SVG 効果の後に別の効果が適用されていると、SVG 出力はラスタライズオブジェクトになります。

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

  1. 効果SVG フィルターSVG フィルターの読み込みを選択します。

  2. 読み込む効果が含まれる SVG ファイルを選択して、「開く」をクリックします。

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

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

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

  • イベントを削除するには、そのイベントを選択して削除ボタンをクリックするか、パネルメニューの「イベントを削除」を選択します。
  • すべてのイベントを削除するには、パネルメニューの「イベントを消去」を選択します。

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

  1. JavaScript ファイルのリンクボタン をクリックします。
  2. JavaScript ファイルダイアログボックスで JavaScript エントリを選択し、次のいずれかの操作を行います。
    • 追加」をクリックして、その他の JavaScript ファイルを参照します。

    • 削除」をクリックして、選択した JavaScript エントリを削除します。

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

  1. SVG インタラクティビティパネルで、イベントを選択します (SVG イベントを参照してください)。

  2. 対応する JavaScript を入力して、Enter キーを押します。

SVG イベント

onfocusin

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

onfocusout

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

onactivate

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

onmousedown

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

onmouseup

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

onclick

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

onmouseover

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

onmousemove

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

onmouseout

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

onkeydown

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

onkeypress

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

onkeyup

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

onload

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

onerror

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

onabort

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

onunload

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

onzoom

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

onresize

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

onscroll

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

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

新しい SVG 書き出し(ファイル書き出しSVG)オプションを利用できます。この新たなワークフローによって、Web や画面のデザインプロジェクト向けに、標準化され Web 用に最適化された SVG ファイルを生成できるようになります。

利用可能なオプションは次のとおりです。

  • スタイル設定。結果のコードを SVG ファイルにどのように書き込むかを選択します。スタイル設定は、内部 CSS、インラインスタイル、プレゼンテーション属性から選択できます。
  • フォント:SVG ファイルでフォントを表現する方法を選択します。アウトラインはパス定義を保持し極めて互換性に優れています。
  • 画像:画像を文書内に埋め込んで保存するか、文書にリンクした外部ファイルとして保存するかを選択します。
  • オブジェクト ID:ID の種類(名前)を SVG ファイルのオブジェクトに割り当てる方法を選択します。レイヤー名、最小、固有の中から選択できます。このオプションでは、オブジェクトの名前が重複している場合の処理方法と、書き出された CSS でオブジェクトが命名される方法を指定します。
  • 小数:オブジェクトの位置の正確さについて、どの程度の情報量を保持するかを選択します。少数の値を大きくすると、オブジェクトのレイアウトがより正確になり、レンダリングされた SVG の視覚的な精度が向上します。ただし、小数の値を大きくすると、書き出された SVG のファイルサイズも大きくなります。
  • 縮小:空のグループとスペース(空白)を削除して SVG のファイルサイズを最適化します。このオプションを選択すると、SVG コードの読みやすさも低下します。
  • レスポンシブ:このオプションをオンにすると、生成された SVG がブラウザー内で拡大・縮小します。絶対サイズの値は書き込まれません。
  • コードを表示:デフォルトのテキストエディターで書き出されたコンテンツを開きます。
  • ブラウザーで表示(アイコン):デフォルトの Web ブラウザーで画像を表示します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー