SVG in HTML（text/html）を実装しました

SVG sie.js JavaScript HTML5

IE8のスクリーンショット

HTML言語の中に直接SVG言語を埋め込むことに成功しました

以下のデモからご覧下さい。プラグインは必要ありません。デモであるHTML文書のソースは次のとおりです。

ソース
<html>
<head>
<title>SVG in HTML - SIE</title>
<meta http-equiv="Content-Type" content="text/html; charset=urf-8">
<script defer="defer" type="text/javascript" src="sie.js"></script>
</head>
<body>
<script type="text/javascript" src="svginhtml.js"></script>
<h1>SVG in HTML - SIE</h1>
<svg width="200" height="200">
 <a href="http://sie.sourceforge.jp/">
  <rect x="20" y="30" width="30" height="300" fill="red"/>
  <text x="40" y="50" font-family="sans-serif">Hello World!</text>
 </a>
</svg>
</body>
</html>

デモ

http://sie.sourceforge.jp/svginhtml.html

画像について

上のスクリーンショットはデモをIE8で試したときに撮ったものです。

動作環境

確認したのはWin XP(SP2)です。以下のブラウザで動きました。

  1. Opera 10.0
  2. Firefox 3.5.3
  3. Internet Explorer 7, 8
  4. Google Chrome 3.0.195.25
  5. Safari 3.1.2

メリット

  • プラグインがなくても、IEなど、ほとんどのブラウザで画像が表示されます
  • JavaScriptが切られても、Lynxであっても、それなりに動作します。
  • 文字列の検索ができます（PerlとPHPの相性がバツグンです）

デメリット

  • W3Cで標準化されていない（HTML5がどうなるかは不明です。ただし、SVGとXHTMLの混合文書の勧告はありますドラフト案はあります)
  • DOMの未サポート（IEのみ）
  • コンテンツとデザインの分離をどうするか？

追記（10月9日）

リンク先を間違えていました。申し訳ありません。修正しました。