SIE - 標準的な2Dベクタ画像のSVGを表示するJavaScriptライブラリ

SIEとは

SIEとは、標準的な2Dベクタ画像のSVGを表示するためのライブラリです。JavaScript言語で設計されています。プラグインは不要です。例えば、インターネットエクスプローラー（Internet Explorer、以下、IE)やその他のブラウザで、SVGを表示できます。

特徴

  1. クロスブラウザ（IEとFirefoxとOperaとSafari）
  2. プラグインが必要ない
  3. SVG画像を表示できる

ライセンス

無償のオープンソースとして公開しているので、どうぞご自由にお使いください。

ライセンスはオープンソースのMozilla Public Licence（MPL1.1）で提供しています。

目次

  1. 使い方
  2. デモ
  3. 動作環境
  4. 注意
  5. 連絡先

使い方

解凍が終わったら

中身を確認してください。以下のとおりです。SIEの本体は、sie.js (縮小版はsie-mini.js) です。それ以外のファイルについては、以下の一覧をご覧下さい。

準備するもの

HTML文書のページと、SVG画像を作って、用意してください。（今回は、Inkscapeで作られたSVG画像の「zeimusu_sakura_.svg」を用います）

ネットの公開のしかた

  1. HTML文書を、「メモ帳」など、テキスト編集ソフトで開いて、「<script defer="defer" type="text/javascript" src="sie.js"></script>」をhead要素の中に追加してください。たとえば、
    <head> <title>IESVG</title> <script defer="defer" type="text/javascript" src="sie.js"></script></head>
    というように。
  2. さらに、body要素の中に、「<object data="zeimusu_sakura_.svg" type="image/svg+xml" width="1000" height="1000"></object>」とコピーして入れます。以下のサンプルのようになります。
  3. 編集したHTML文書とSVG画像、それに、sie.jsをネット上にアップロードすればOKです。必ず、アップロードしてください。

デモ（zeimusu_sakura_.svg）

<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 onLoad="svgtovml()">
<h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>

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

動作環境

IE6、7、8で確認

その他、Firefox3.6.3、Opera10.63、Safari3.1.2 (以上、環境はWindowsXP SP2)

注意

必ず、サーバにアップロードしてください。IEのセキュリティ上、ローカルでは動きません。

極力、object要素をお使いください。embed要素は、IE6において、警告の窓がポップアップします。IE7では異常はありません。

連絡先

メーリングリスト

sie-developers@lists.sourceforge.jp。登録先はSIEの公式メーリングリスト。

バグの報告先

チケット。バグを追跡できるシステムですので、こちらでバグを知らせてください。

ブログ

dhrnameの開発日誌。開発ブログです。

Twitter

http://twitter.com/dhrname。英語で開発のつぶやきを提供しています。

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

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