![[PukiWiki]](../pukiwiki/image/pukiwiki.png "[PukiWiki]")
Internet Explorer で SVG ファイルを直接表示できるようにする †
目次 †
概要 †
IE8 以前の Internet Explorer は、標準では SVG ファイルの表示に対応していません。
しかし、SIE という JavaScript ライブラリを用いると、
HTML の文書内に SVG の画像を表示することができるようになります。
これを利用して、SVG ファイルをクリックするだけで直接表示できるようにする、
sie.php というものを作ってみました。
サンプル †
以下のページに、SVG ファイルのサンプルをいくつか置いてあります。
動作環境 †
処理の大半は JavaScript によって行われるため、 特にブラウザにプラグインをインストールしたりする必要はありません。 ただし、サーバ側での処理を行うために、
- Apache の mod_rewrite モジュール
- PHP
が使える Web サーバであることが必要です。
インストール †
SIE のページ から、SIE のアーカイブファイルをダウンロードしてきて下さい。
展開すると、次のようなファイルが入っています。
sie-0xx/ ｜ ├ tool/ ｜ ├ sie-php/ ｜ ｜ ├ sie.php ｜ ｜ └ .htaccess ｜ ： ｜ ├ sie.js ：
これらの
- sie.js
- sie.php
- .htaccess
の３つのファイルを、SVG ファイルと同じディレクトリにコピーして下さい。
使い方 †
HTML の文書内で、SVG ファイルへリンクを張って下さい。 リンクをクリックすると、SVG の画像がブラウザ上に表示されます。
設定 †
JavaScript のファイル名 †
SIE の JavaScript のファイルは、sie.js という名前であることを想定しています。 sie-mini.js のような別のファイル名にしたい場合は、
// Filename of SIE JavaScript library. define('SIE_JS', 'sie.js');
という定義が sie.php の先頭にあるので、この部分を書き換えて下さい。
ディレクトリ構成 †
sie.js や sie.php のファイルは、SVG ファイルと同じディレクトリに置くのが簡単ですが、 別々のディレクトリに配置したい場合は次のようにして下さい。
- sie.php を sie.js と同じディレクトリにコピー
- .htaccess を SVG ファイルと同じディレクトリにコピー
- .htaccess 内の sie.php と書かれている箇所を、ディレクトリ構成に合わせて書き換える
現状の問題点 †
今のところ、以下のような問題があります。
sie.php 経由で表示した後、HTML 文書中で同じ SVG ファイルを表示しようとすると、表示されない
(Version 0.2 で修正)IE で SVG ファイルをダウンロードすると、加工された SVG ファイルになってしまう
(Version 0.3 で一部対応。右クリックからのダウンロードには未対応)SVGZ 形式のファイルに未対応
(Version 0.4 で対応)- SVG ファイルの大きさを、1000×1000 ピクセルに決めうちしている
ライセンス †
MIT ライセンスです。
ダウンロード †
sie.php は SIE のパッケージに同梱されています。 同梱されているファイルが古かった場合は、以下のリンクから最新版をダウンロードして下さい。
更新履歴 †
- Version 0.4 (2010/10/16)
- IE9 に対応
- SVGZ 形式のファイルに対応
- Version 0.3 (2008/07/13)
- ファイル名に空白文字が含まれていると表示できなかったのを修正
- URL に ? が含まれる場合は sie.php を経由しないように変更
- "This is an image converted by SIE." というメッセージを表示するようにした
- ダウンロード用のリンクを、画像と一緒に表示するようにした
- Version 0.2 (2008/05/16)
- SVG ファイルの拡張子が大文字の場合に対応
- ブラウザキャッシュを制御するコードを追加
- 出力する HTML で <html> タグが抜けていたのを修正
- sie.js を読み込むタイミングを変更
- Version 0.1 (2008/05/10)
- 初公開
