SIE - 標準的な2Dベクタ画像のSVGを表示するJavaScriptライブラリ
SIEとは
SIEとは、標準的な2Dベクタ画像のSVGを表示するためのライブラリです。JavaScript言語で設計されています。プラグインは不要です。例えば、インターネットエクスプローラー(Internet Explorer、以下、IE)やその他のブラウザで、SVGを表示できます。
特徴
- クロスブラウザ(IEとFirefoxとOperaとSafari)
- プラグインが必要ない
- SVG画像を表示できる
ライセンス
無償のオープンソースとして公開しているので、どうぞご自由にお使いください。
ライセンスはオープンソースのMIT Licenceで提供しています。
目次
- 使い方
- デモ
- 動作環境
- 注意
- 連絡先
使い方
解凍が終わったら
中身を確認してください。以下のとおりです。SIEの本体は、sie.js です。
準備するもの
HTML文書のページと、SVG画像を作って、用意してください。(今回は、Inkscapeで作られたSVG画像の「zeimusu_sakura_.svg」を用います)
ネットの公開のしかた
- 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>
というように。
- さらに、body要素の中に、「<object data="org/svg/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="org/svg/zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"></object>
</body>
</html>
動作環境
IE11で確認
その他、Firefox39、Opera30(以上、環境はWindows 7)
注意
必ず、サーバにアップロードしてください。IEのセキュリティ上、ローカルでは動きません。
コミュニティ
メーリングリスト
sie-developers@lists.osdn.jp。ログインページはSIEの公式メーリングリスト。
バグの報告先
チケット。バグを追跡できるシステム。
dhrnameの開発日誌。開発ブログです。
http://twitter.com/dhrname。英語で開発のつぶやきを提供しています。
SIEのパッケージ一覧
- sie.js (本体)
- Readme.html (解説のページ)
- README_EN.txt (解説の英語版)
- ChangeLog.txt (SIEの変更履歴)
- tool (補助ツール)
- sie_php (SVGファイルを直接ブラウザに表示できるPHP。revulo氏が作成)
- svg-in-html (インラインSVGを実現するスクリプト)
- SieReader (URLで?の後に指定されたファイル名のSVGを読みとることができるHTML文書)
- funcproto (非同期処理の操作ができるライブラリ)
- sie.js.gz (sie.jsをgzipで圧縮したもの)
- zeimusu_sakra_.svg (SVG形式のサンプル画像)
- org (ソースコード)
- sie-uncompressed.js (sie.jsのオリジナルソース)
- build.js (SIEのモジュールを一つのファイルにして、オリジナルソースを作成するプログラム)
- w3c (SIEのモジュールを収納したディレクトリ)
最後に、revulo氏, bellbind氏と、さんに謝意を述べたいと思います。
© Copyright 2003-2016 dhrname(Eメールでsie-developers@lists.sourceforge.jp))。このページの許諾に関しても、SIEと同様のライセンスが適用されるものとします。