SVGにスクリプトを埋め込むサンプル

今だとブラウザが気を利かせてくれてスクリプト実行できなくなってるみたい。
ただ、ローカルにsvgをダウンロードしてブラウザへ直接D&Dすると反応するから、利用シーンによっては使える場合があるかも。

スクリプト無し

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 200 C 150 50, 250 350, 350 200 S 450 50, 550 200"
        stroke="red" stroke-width="3" fill="none"/>
  <text x="100" y="350" font-family="Arial" font-size="48" fill="red"
        filter="url(#shadow)">
    SVG sample!
  </text>
  <filter id="shadow">
    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black"/>
  </filter>
</svg>

スクリプト有り

画像のテキストにonClickイベントを入れてみた。

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
  <path d="M50 200 C 80 100, 150 50, 200 80 S 250 200, 200 300 S 100 350, 50 280 C 20 250, 50 150, 150 100 C 250 50, 350 100, 400 200 S 450 300, 400 350 S 300 400, 250 300"
        stroke="red" stroke-width="3" fill="none" />
  <text x="100" y="350" font-family="Arial" font-size="48" fill="red"
        filter="url(#shadow)" onclick="showAlert()">
    SVG sample!
  </text>
  <filter id="shadow">
    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black"/>
  </filter>
  <script type="text/javascript">
    function showAlert() {
      alert("SVG画像をクリックしちゃったね！");
    }
  </script>
</svg>