SIE - 2Dベクトル画像用ライブラリ

SIEとは

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

特徴

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

ライセンス

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

Mozilla Public Licence（MPL1.1）です。

使い方

解凍が終わったら

中身を確認してください。以下のとおりです。SIEの本体は、sie.jsです。それ以外のファイルはサンプルと解説です。

sie.js(本体)
Readme.html (解説のページ)
sie-mini.js(sie.jsをYUI compressorで縮小したもの）
zeimusu_sakura_.svg(サンプルのSVG画像）
tool (さまざまな支援ライブラリ等が入っているディレクトリ)
1. sieb (TEXT2SVG機能を用いたブックマークレット)
2. sie-php3 (revulo氏が作成したHTML文書を経由せずにSVG画像を直接表示するPHPスクリプト)
3. SieReader (HTMLの知識がなくてもSIEを作動させられるリーダー)
4. svginhtml (SVGをHTMLの中に直接埋め込むことができるJavaScript)

なお、ツールは各自に説明書を設けていますので、そちらをお読みください。

準備するもの

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

ネットの公開のしかた

三つ方法があります。一つはobject要素を使うもの、もう二つは、直製HTMLの中に埋め込むsvginhtmlを使う方法や、sie-php3を使うことです。ここでは、3つの方法のうちの一つ、object要素を使う方法を示します。

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>
というように。<script defer="defer" type="text/javascript" src="sie.js"></script>
さらに、body要素の中に、「<object data="zeimusu_sakura_.svg" type="image/svg+xml" width="1000" height="1000"></object>」とコピーして入れます。以下のサンプルのようになります。
編集した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>

その他のデモ

SieReaderに関しては、Webで公開されているデモ(http://sie.sourceforge.jp/SieReader.html?zeimusu_sakura_.svg)をご覧下さい

SVGをHTMLに直接埋め込むデモに関しては、svginhtmlのデモをご覧下さい。

動作環境

IE6、7、8で確認

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

目標

ウェブ上でSVGを表示できるようにする。

注意

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

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

メーリングリスト

最新情報を知りたい方は、SIEの公式メーリングリストにご登録ください。

課題

バージョンや、問題等につきましては、ブログで公開しています。「dhrnameのウェブ日誌」をご覧ください。

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