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) {
のような箇所があるので、このように１行追加し、sie.js という名前で保存して下さい。
（書き換えなくても動きますが、その場合は HTML 文書内での表示ができなくなります。）
SIE 0.22 以降では、sie.js にリネームするだけで良くなりました。
次に、 sie_php-0.1.zip をダウンロードして下さい。 展開すると、以下の２つのファイルが入っています。
- .htaccess
- sie.php
SVG ファイルと sie.js も含めて、全ファイルを同じディレクトリに置いてしまうのが簡単ですが、 別々のディレクトリに配置したい場合は次のようにして下さい。
- sie.php を、sie.js と同じディレクトリにコピー
- .htaccess を、SVG ファイルと同じディレクトリにコピー
- .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 ピクセルに決めうちしている
１つ目の問題は、恐らくどうしようもないですが、 ２つ目と３つ目のは、処理を手抜きしているのが原因なので、そのうち対応するつもりです。
ライセンス
MIT ライセンスにしておきます。 なにか問題があれば言って下さい。
- 14 http://d.hatena.ne.jp/dhrname/
- 7 http://sample.revulo.com/SVG/index.html
- 6 google検索(SVG IE)
- 4 http://sourceforge.jp/projects/sie/wiki/アイデア小出し帳
- 3 google検索(sie.js)
- 3 http://d.hatena.ne.jp/dhrname/searchdiary?word=*[S...
- 3 http://d.hatena.ne.jp/dhrname/20080510/p1
- 2 google検索(SVG IE)
- 2 google検索(internetexplorer svg)
- 2 google検索(svg sie)
- 2 google検索(SVG php)
- 2 google検索(SVGファイル)
- 2 google検索(SVGファイル)
- 2 google検索(SVG IE js)
- 2 google検索(svg 表示)
- 2 google検索(svgファイル)
- 2 google検索(svgファイル IE)
- 2 google検索(ie svg)
- 2 google検索(html svg 表示)
- 2 google検索(html svg 表示)
- 2 http://sourceforge.jp/projects/sie/wiki/sie.php
- 2 http://sourceforge.jp/forum/forum.php?thread_id=18...
- 2 goo検索(SVGファイル)
- 2 http://d.hatena.ne.jp/dhrname/?of=10
- 1 http://www.revulo.com/
- 1 google検索(svg html javascript 表示)
- 1 google検索(svg .htaccess)
- 1 google検索(svgファイル)
- 1 google検索(SVG SIE インストール sie.js)
- 1 google検索(svg html 表示)
- 1 google検索(html svg)
- 1 google検索(svg html javascript 表示)
- 1 google検索(SVG php)
- 1 google検索(HTML svg表示)
- 1 google検索(SVGZ 表示 ブラウザ)
- 1 google検索(SVGファイル 表示)
- 1 google検索(IE SVG)
- 1 google検索(svg html)
- 1 google検索(SVG 表示)
- 1 google検索(svgファイル)
- 1 google検索(IE svg)
- 1 google検索(sie.php)
- 1 google検索(IE SVG)
- 1 google検索(SVGファイル)
- 1 google検索(SVG 表示)
- 1 google検索(svgz ie)
- 1 google検索(jsファイルにphpを)
- 1 google検索(SVG internetexpｌorer)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(svgファイル)
- 1 google検索(SVGを直接HTML)
- 1 google検索(vmlをsvg)
- 1 google検索(svg internetexplorer)
- 1 google検索(svg ie)
- 1 google検索(svg IE 表示)
- 1 google検索(svg IE)
- 1 google検索(svg ファイル)
- 1 google検索(svg 表示)
- 1 google検索(sie SVG)
- 1 google検索(php svg 表示)
- 1 google検索(phP svg)
- 1 google検索(jquery 使うと htaccess)
- 1 google検索(internet explorer svg)
- 1 google検索(ie svg)
- 1 google検索(html svg 表示 innerHTML)
- 1 google検索(XHR PHP CSV ダウンロード)
- 1 google検索(X-Requested-With php)
- 1 google検索(SVG 表示)
- 1 google検索(SVGファイル表示 HTML)
- 1 google検索(IE svg)
- 1 google検索(IE svg)
- 1 google検索(IE SVG)
- 1 google検索(ｓｖｇ ファイル)
- 1 google検索(SVG SIE)
- 1 google検索(svgファイル)
- 1 google検索(svg js ie)
- 1 google検索(svg ファイル)
- 1 google検索(IE SVG)
- 1 google検索(svg IE version 7)
- 1 google検索(svgファイル)
- 1 google検索(svgファイル 表示)
- 1 google検索(svg .htaccess)
- 1 google検索(svg html 表示)
- 1 google検索(svgファイル firefox)
- 1 google検索(SVGファイル)
- 1 google検索(svg javascript js)
- 1 google検索(Linux SVG形式 ファイル 表示)
- 1 google検索(SVGファイル)
- 1 google検索(svg javascript ie)
- 1 google検索(svg ie)
- 1 google検索(svg ie)
- 1 google検索(svg html 表示)
- 1 google検索(svg IE)
- 1 google検索(svg 表示 html)
- 1 google検索(svg 表示)
- 1 google検索(svg 表示)
- 1 google検索(svgファイル 表示)
- 1 google検索(svgファイル 表示)
