SVGの仕様には、インタラクティビティとイベントの取り扱いも含まれています。ハイパーリンク、マウス・イベント、キーボード・イベント、ステート・チェンジ・イベントなどはすべて、SVGではスクリプト可能です。<a>エレメントは、ドローイングのどの部分が、現在のブラウザのフレームとhref属性で指定されたURLのコンテントとの置き換えを起こすかを示すために利用することができます。次の実例では、ハイパーリンクがパスに付けられています（この例では、パスは三角形になっています）。

<a xlink:href="http://www.w3.org">
<path d="M 0 0 L 200 0 L 100 200 Z">
</a>

パスがクリックされると、現在のブラウザのフレームがW3Cのホームページに入れ替わります。

SVG独自の機能として、SVG画像の個々のエレメントをリンクとして参照することができるために、次の実例のようにしてダイナミック・ロールオーバー効果を作り出すことができます。右のHTMLリンクの上でカーソルを押してください。それから、カーソルをSVG 画像の中のエレメントの上で動かしてください（“ホバー”効果を利用できるのは、IE4とIE5だけです）。

スクリプティング・アニメーションの場合と同様に、ロールオーバーはさまざまなプロパティの値を変化させることによって作成できます。

たとえば、上のSVG画像の“linkS”エレメントは、“fill-opacity”プロパティの値が“０”から“７”まで変化するのにしたがって、ロールオーバーを表示します。

このスクリプトでは、SVGエレメントと関連づけられたイベント・ハンドラを利用しています。“mouseOver”イベントと“mouseOut”イベントを利用し、mouse_over_aおよびmouse_out_aという２つのイベントそれぞれに、異なる関数を定義しています。イベントハンドラは、HTMLの場合と同じようにして、どのSVGエレメントとも関連づけることが可能です。たとえば：

<g id="linkV"
onMouseOver="mouse_over_a('linkV')"
onMouseOut="mouse_out_a('linkV')">

HTMLの場合のように、イベント・ハンドラの値は有効なJavaScriptステートメントとなり得ます。特に、親HTMLドキュメントないしSVGドキュメント自身の中で定義されているJavaScript関数のコールとなることができます。また、オブジェクトeventは、JavaScriptステートメント内部で使うことが可能です。このオブジェクトは、イベント・タイプ、マウスの位置等々、そのイベントに関連するより多くの属性を持ちます。

次の実例では、最初のSVG画像のロールオーバーがトリガーとなって、２番目のSVG画像のエレメントを操作する関数を呼び出します。二つの画像は別のものだということをお忘れなく。カーソルを下の画像の数字付きボックスの上で動かしたり、クリックしてみてください。

［上のSVG画像は下のSVG画像とは別のものです］

このインタラクションはかなり洗練されていますが、これまでに見てきたスクリプティングで作られています。“JavaScriptのソースを見る”をクリックして、スクリプトをご覧ください。前のさまざまな実例で使ってきた、いろいろな関数や機能が使われていることに注目してください。たとえば、（マウスが通過する際に）エレメントを見えるようにしたり、現存するエレメントを操作したり、継続的アニメーションとしてアニメーション化したりといった部分です（“gradient_star”は、細いアウトライン・エレメントから、太く塗りつぶされたアニメーション・ストロークのエレメントになります）。

次のレッスン：キーボード・イベント