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 ライセンスにしておきます。 なにか問題があれば言って下さい。
- 22 http://sourceforge.jp/forum/message.php?msg_id=365...
- 14 http://d.hatena.ne.jp/dhrname/
- 9 google検索(svgファイル)
- 7 http://sourceforge.jp/projects/sie/wiki/アイデア小出し帳
- 7 http://sample.revulo.com/SVG/index.html
- 6 google検索(svgファイル)
- 6 google検索(SVG IE)
- 6 http://sourceforge.jp/forum/forum.php?thread_id=18...
- 5 google検索(svgファイル)
- 5 google検索(php 画像 直接ファイルから表示 IE6)
- 4 google検索(IE SVG)
- 4 http://www.google.co.jp/url?sa=t&source=web&cd=32&...
- 4 google検索(svgファイル)
- 4 google検索(svg ie)
- 4 google検索(svgファイル)
- 4 google検索(IE SVG)
- 4 google検索(ダウンロード ファイルを直接表示)
- 4 http://www.google.co.jp/hws/search?hl=ja&q=svgファ...
- 4 http://www.google.co.jp/hws/search?hl=ja&q=IE svg&...
- 3 google検索(IE SVGファイル)
- 3 google検索(svg ie)
- 3 google検索(sie.js)
- 3 http://www.google.co.jp/url?sa=t&source=web&cd=1&v...
- 3 http://www.google.co.jp/url?sa=t&rct=j&q=svg タグ ...
- 3 google検索(svg ie)
- 3 google検索(IE SIE)
- 3 google検索(svgファイルを貼り付けるには)
- 3 google検索(svgファイル ブラウザ)
- 3 google検索(IE9 SVGが表示されない)
- 3 google検索(svgをphpで表示)
- 3 google検索(svg ie)
- 3 google検索(svgファイル)
- 3 google検索(svgファイル IE)
- 3 google検索(ie svg)
- 3 google検索(SVGファイル サンプル)
- 3 http://www.google.co.jp/hws/search?hl=ja&q=svg フ�...
- 3 http://www.google.co.jp/hws/search?hl=ja&q=SVG IE&...
- 3 http://sourceforge.jp/projects/sie/wiki/sie.php
- 3 http://d.hatena.ne.jp/dhrname/searchdiary?word=*[S...
- 3 http://d.hatena.ne.jp/dhrname/20080510/p1
- 2 http://zh.sourceforge.jp/projects/sie/wiki/sie.php...
- 2 google検索(php SVGファイル)
- 2 google検索(ＩＥでＳＶＧファイル表示)
- 2 google検索(SVG IE)
- 2 google検索(SVG PHP IE)
- 2 google検索(ｓｖｇファイル html)
- 2 google検索(internetexplorer svg)
- 2 google検索(svg sie)
- 2 google検索(SVG php)
- 2 google検索(IE SVG)
- 2 http://www.google.co.jp/url?sa=t&source=web&cd=12&...
- 2 http://www.google.co.jp/url?sa=t&rct=j&q=svg php ...
- 2 http://www.google.co.jp/url?sa=t&rct=j&q=svgファイ...
- 2 http://www.google.co.jp/url?sa=t&rct=j&q=sie.js&so...
- 2 http://www.google.co.jp/url?sa=t&rct=j&q=%E3%83%96...
- 2 google検索(svgファイル)
- 2 google検索(SVGファイル)
- 2 google検索(SVG IE)
- 2 google検索(SVGファイル)
- 2 google検索(t)
- 2 google検索(2)
- 2 google検索(0h)
- 2 google検索(svg ie)
- 2 google検索(svg ie)
- 2 google検索(svgファイル テスト ie)
- 2 google検索(ie svg)
- 2 google検索(ie svg)
- 2 google検索(SVG IE js)
- 2 google検索(SVG IE)
- 2 google検索(SVGファイル)
- 2 google検索(SVGファイル)
- 2 google検索(SVGファイル IE)
- 2 google検索(IE svg)
- 2 google検索(IE SVG)
- 2 google検索(SVG 表示されない )
- 2 google検索(Flex SVG)
- 2 google検索(svgファイル ブラウザ 対応)
- 2 google検索(svgファイル)
- 2 google検索(svgファイル)
- 2 google検索(SVGファイル IE 表示)
- 2 google検索(IE SVG)
- 2 google検索(svgファイル webで使う)
- 2 google検索(画像表示 直接 IE)
- 2 google検索(svg ie6)
- 2 google検索(svg ie)
- 2 google検索(svg ie)
- 2 google検索(svg ie)
- 2 google検索(svg 表示)
- 2 google検索(svgファイル ブラウザ)
- 2 google検索(svgファイル)
- 2 google検索(SVG IE)
- 2 google検索(IE SVG)
- 2 google検索(IE SVG)
- 2 google検索(IE でsvgz が表示されない)
- 2 google検索(.SVG 表示 IE)
- 2 google検索(svg ie プラグイン)
- 2 google検索(xmlhttp 速度)
- 2 google検索(svg html 表示)
- 2 google検索(svgファイル)
- 2 google検索(svgファイル)
