まとめ ブログ ダウンロード 掲示板 メール

れぶろぐ

< 2008-05-08 (木) 2008-05-13 (火) > 最新


2008-05-10 (土)

IE で SVG ファイルの直接表示を可能にする sie.php 0.1 を公開

Firefox などのブラウザでは、SVG ファイルをクリックすると画像として表示することができます。

一方、Internet Explorer でも、 SIE という JavaScript ライブラリを用いると、 HTML の文書中に SVG の画像を表示することができますが、 これを、SVG ファイルをクリックするだけで表示できるように、機能拡張してみました。

動作環境

処理の大半は JavaScript によって行われますが、 Web サーバ側で細工をするために、

  • Apache の mod_rewrite モジュール
  • PHP

が使える環境であることが必要です。

インストール

まず、SIE の公式ページ から、SIE のアーカイブをダウンロードして下さい。 展開すると sie021.js のようなファイルが入っていますが、最後の方に、

--- sie021.js	2008-04-30 23:00:18.000000000 +0900
+++ sie.js	2008-05-10 18:38:15.000000000 +0900
@@ -1568,4 +1568,5 @@
     if (xmlhttp) {
         xmlhttp.open("GET",url,true);
+        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xmlhttp.onreadystatechange=function() {
         if (xmlhttp.readyState==4  &&  xmlhttp.status == 200) {

のような箇所があるので、このように1行追加し、sie.js という名前で保存して下さい。 (書き換えなくても動きますが、その場合は HTML 文書内での表示ができなくなります。)
SIE 0.22 以降では、sie.js にリネームするだけで良くなりました。

次に、 sie_php-0.1.zip をダウンロードして下さい。 展開すると、以下の2つのファイルが入っています。

  • .htaccess
  • sie.php

SVG ファイルと sie.js も含めて、全ファイルを同じディレクトリに置いてしまうのが簡単ですが、 別々のディレクトリに配置したい場合は次のようにして下さい。

  1. sie.php を、sie.js と同じディレクトリにコピー
  2. .htaccess を、SVG ファイルと同じディレクトリにコピー
  3. .htaccess 内の ./sie.php と書かれている箇所を、ディレクトリ構成に合わせて書き換える

SIE のスクリプトは sie.js という名前であることを想定していますが、 sie.min.js のような別のファイル名にしたい場合は、

define('SIE_JS', 'sie.js');

という定義が sie.php の先頭にあるので、この部分を書き換えて下さい。

使い方

HTML の文書内で、SVG ファイルへリンクを貼って下さい。 リンクをクリックすると、SVG の画像がブラウザ上に表示されます。

サンプル

sie.php を利用するように、サンプルページを手直ししました。 以前のサンプルページもしばらく残しておきます。

現状の問題点 (TODO)

今のところ、以下のような問題があります。

  • IE で SVG ファイルをダウンロードすると、加工された SVG ファイルになってしまう。
  • SVG ファイルを直接表示した後、HTML 文書中で同じ SVG ファイルを表示しようとすると、表示されない。
  • .svgz ファイルに未対応
  • SVG ファイルの大きさを、1000×1000 ピクセルに決めうちしている

1つ目の問題は、恐らくどうしようもないですが、 2つ目と3つ目のは、処理を手抜きしているのが原因なので、そのうち対応するつもりです。

ライセンス

MIT ライセンスにしておきます。 なにか問題があれば言って下さい。

このエントリの続き: 2008-05-16 (金)
Tags: SVG | このエントリを含む del.icio.us | このエントリを含むはてなブックマーク | このエントリを含む livedoor クリップ | Permalink
本日のリンク元

編集