デモ - SIE

  1. ホーム
  2. スクリーンショット
  3. デモ
  4. 使い方
  5. メーリングリスト

デモ(zeimusu_sakura_.svg)

動作環境

IE7で確認

その他、Firefox3.0.1、Opera9.52、Safari3.1.2 (以上、環境はWindowsXP SP2)

ソース

サンプルのソースは以下のとおりです。「sie.js」の部分は適宜変わります。

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE</title>
<script defer="defer" type="text/javascript" src="sie.js"></script>
<link rel="stylesheet" type="text/css" href="instyle.css"></link>
</head>
<body>
<h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>

<h2>デモ(zeimusu_sakura_.svg)</h2>
<object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"></object>
    </body>
</html>

ブックマークする

Sieb2(ブックマークレット)

あらかじめ、上記のリンク先をブックマーク(IEでは、「右クリック->お気に入りに追加」。それ以外のブラウザではツールバーにドラッグでOK)してください。

ネットの公開のしかた

  1. 掲示板やブログにSVGのソースを必ず「整形テキスト」で書き込んでください。たとえば、以下のSVGのソースを使ってみましょう。なお、整形テキストはpre要素を利用した文章です。
  2. 上記でブックマークしたものを呼び出してください。ブックマークを呼び出したら、すぐに、下記のデモで円が表示されるはずです。

デモ(4wd.svg)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"> <g id="eo"> <circle cx="50" cy="40" r="40"/>
<circle cx="40" cy="30" r="20" fill="red"/> </g> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none">
  &lt;<g id="eo">
   <circle cx="50" cy="40" r="40"/>
   <circle cx="40" cy="30" r="20" fill="red"/>
  </g>
 </svg>

HTML文書のソースは以下のとおり。

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE</title>
<script defer="defer" type="text/javascript" src="sie.js"></script>
<link rel="stylesheet" type="text/css" href="instyle.css"></link>
</head>
<body>
<h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>
<h2>デモ(ant.svg)</h2>

<pre>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"&gt; &lt;g id="eo"&gt; &lt;circle cx="50" cy="40" r="40"/&gt; &lt;circle cx="40" cy="30" r="20" fill="red"/&gt; &lt;/g&gt; &lt;/svg&gt;</pre>

</body>
</html>

最後に、SourceForge.jpさんに謝意を述べたいと思います。

© Copyright 2003 dhr(Eメールでdhrname@mail.goo.ne.jp)コードの著作権の許諾に関しては、次の文章に書かれています。(英文LICENCE.txt)。このページの許諾に関しても、同様のライセンスが適用されるものとします。