SVGを直接HTMLに埋め込む方法(プラグインを使わない)

スクリーンショット

(XHTMLではない)HTMLにSVGを直接埋め込んでみました。

特徴

方法としては、JavaScript言語を使って、object要素のdataスキームにSVGを埋め込む方法です。

  1. プラグイン不要
  2. クロスブラウザ(IE6+とOpera9+とFirefox2+とSafari3+)
  3. SVGを埋め込むHTMLがXMLでなくてもよい

また、script要素の中身を「HTMLパーサが処理しないで、テキストとして処理する」ということも利用しています。
さらに、それをSIE(プラグインを使わないでIESVG画像を表示できる)と組み合わせてみました。

サンプル

実験用のページです。
http://dhr.at.infoseek.co.jp/workingvml.html

ソース




<h1><strong>実験用</strong>SIE - プラグインなしでIESVGを表示する方法</h1>
<h2>このページは実験用のものです。公式なものは、http://dhr.at.infoseek.co.jp/vml.htmlで公開されています。</h2>
<script type="image/svg+xml" width="200" height="200">
  
   
   
  
 
<h2>SIEはプラグインが必要ありません</h2>

感謝

Joy of S/Nさんに感謝です。
http://blogs.dion.ne.jp/kit/archives/5767781.html