SVG に JavaScript を埋め込む方法 #SVG

SVG は内部に JavaScript を埋め込むことができる。

SVG ファイル内への JavaScript の記述例

以下の SVG をブラウザで開くと埋め込んだ JavaScript が実行される(Safari, Chrome で確認)。
表示されている図形をクリックするとランダムに色が変わる。

with_js.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="400pt" height="400pt">
  <script><![CDATA[
    function fillRandomColor(e) {
        var r = Math.floor(Math.random() * 255.0);
        var g = Math.floor(Math.random() * 255.0);
        var b = Math.floor(Math.random() * 255.0);
        e.setAttribute('fill', 'rgb(' + r + ', ' + g + ', ' + b + ')');
    }
  ]]></script>
  <rect id="r1" x="10" y="10" width="200" height="100" stroke="blue" fill="yellow" onclick="fillRandomColor(this);" />
</svg>

HTML における JavaScript とはいくつか違いがある模様。

SVG の読み込み完了は window.onload の代わりに document.documentElement.onload を使う。
jQuery は基本的に使えない(HTML DOM を前提としたライブラリは使用不可)。

HTML で SVG ファイルを参照するとき

HTML 中から SVG ファイルを参照する方法は 2 つある。

img タグを使う
object タグを使う

img タグを使って参照した場合は JavaScript が動作しないため、object タグで参照する。

import_svg.html

<!DOCTYPE html>
<html>
  <header>
    <title>SVG Test</title>
  </header>
  <body>
    <img src="with_js.svg">
    <object type="image/svg+xml" data="with_js.svg"></object>
  </body>
</html>