IE10からローカルファイルをロードする際において、svgz形式のファイルをHTMLから表示させることは出来ますか?プラグインなどの使用や、設定を標準から変更するというのは無しとします。しかし、JavaScriptライブラリの使用はOKです。HTMLの記述例をお願いします。


とりあえず以下のHTMLをベースにいろいろいじっているのですが、chromeでは表示されるのに、IE10では表示されなくて頭をひねっています。
(まだ非対応なのでしょうか?)

<!DOCTYPE html>
<head>
<title>test</title>
</head>
<body>
<img src="./hogehoge.svgz" type="image/svg+xml" />
</body>
</html>

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/09/26 22:18:19
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:holoholobird No.1

回答回数574ベストアンサー獲得回数104

ポイント150pt

http://stackoverflow.com/questions/7510208/how-to-decompress-svgz-with-javascript
のようにgzipを使用するのが一般的なようです。

http://defghi1977-onblog.blogspot.jp/2012/07/jsziptoolssvgsvgz.html
とか。

>HTMLの記述例をお願いします。
http://freefielder.jp/blog/2011/05/javascript-gzip.html
を見る限り、HTMLのコードはそのままでgzipしたものを置き、.htaccessのコードのみ書き換えるのが適当なようです。

id:halohalolin

holoholobirdさんありがとうございます。

Jsziptoolsを使ってメモリー内で解凍し表示するということですかね?
ちょっと頭が整理できていないのですが考えてみます。

2013/09/20 21:26:55
id:fowling-piece No.2

回答回数37ベストアンサー獲得回数8

ポイント150pt

img タグには type 属性はありませんので、object タグを試してみてください。

<object data="hogehoge.svgz" type="image/svg+xml"></object>

Stackoverflow にはこのような投稿もありました。

I found the following lines of code which do embed my SVG(Z) illustration correctly under Firefox, Chrome, Opera and Safari, however this does NOT work under Internet Explorer.

<embed src="svg.svgz" width="200px" height="200px" type="image/svg+xml" /> 
How to embed Vector Graphics SVG or SVGZ in HTML website properly? - Stack Overflow

「ローカルファイルをロードする」とおっしゃってるのは file: プロトコルを使ってるということだと思いますが、そもそもローカルからのファイル読み出しでは Content-Type が指定されていません。
根本的な解決はローカルに Apache を建てて Mime-Type を正しく定義することだと思います。

AddType image/svg+xml svg svgz
id:halohalolin

SPANIELさんありがとうございます

Apacheインストール面倒くさい、XAMPPインストールするのも面倒くさい
(というか、これ以上試行錯誤の時間を費やしたくない)と思って
ローカルファイルからさくっと表示する方法はないかと質問したのですが
やはりそんなに甘くないようですね。

また試してみます。

2013/09/20 21:31:27
id:halohalolin

そういえばすでに構築済みのWindowsサーバなApache環境があったのを思い出したので
一部領域を間借りして以下の.htaccessファイルと先のSVGZと検証用SVGファイル
あと、先のHTMLにobjectタグによるSVGZファイルの読み込みとSVGファイルの読み込みも追記したコードを上げてみました

*htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

*html


<head>
<title>test</title>
</head>
<body>




<object data="./hogehoge.svgz" type="image/svg+xml"></object>
</body>
</html>


その場合、IE/Chrome/FirefoxでもSVGファイルは読めるのですが
SVGZファイルは、IEでもChromeでも読めないが、Firefoxは読める(img/objectタグ両方OK)症状が発生しました
何故だ?!

なおその際、Chromeは以下のエラーを吐きます。

This page contains the following errors:

error on line 1 at column 1: Encoding error
Below is a rendering of the page

2013/09/20 22:36:52
  • id:windofjuly
    うぃんど 2013/09/20 20:52:03
    IE10はsvgソースであればimgタグでも展開してくれます。
    <img src="./hogehoge.svg" />

    それはさておき、
    解凍さえできればsvgソースとして挿入してやるだけでで可能です。

    <!DOCTYPE html>
    <head>
    <meta http-equiv="content-script-type" content="text/javascript">
    <script src="/lib/zip.js"></script>
    </head>
    <body>

    非圧縮svgファイル<br />
    <img src="hogehoge.svg" /><br />
    <object type="image/svg+xml" data="hogehoge.svg"></object><br />
    <br />

    スクリプトで書き出し<br />
    <script>
    document.write('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">');
    document.write('<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>');
    document.write('<circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>');
    document.write('</svg>');
    </script>

    </body>
    </html>

    参考文献
    http://msdn.microsoft.com/ja-jp/library/ie/gg589526%28v=vs.85%29.aspx
    http://ja.wikipedia.org/wiki/XMLHttpRequest
    http://www.w3.org/TR/FileAPI/


    ファイル読み込みはFILE APIを使うべきか他にすべきか、
    javascriptでungzipするのはどうするのが効率良いか…、
    あまりよい形に整理できそうにないので以上コメントにします。
  • id:halohalolin
    うぃんどさんありがとうございます。

    通信スピードを稼ぎたいので、svgz直で読みたいです!
    宜しくお願いいたします。
  • id:TransFreeBSD
    http://stackoverflow.com/questions/7510208/how-to-decompress-svgz-with-javascript#comment9098429_7510895
    これの話は"Content-Encoding: gzip"をつけろという話だと思います。
    http://forum.mozilla.gr.jp/?mode=al2&namber=42347&KLOG=271#42359
    http://www.synapse.jp/cgi/support/bbs/c-board.cgi?cmd=ntr;tree=13076;id=
    IE9だとobjectタグ経由(Content-Type付き相当?)ならOKという話も。
    http://less.carbonfairy.org/post/1058123811
    サーバ経由とそうでない場合、タグの指定などでブラウザの解釈がかわるんじゃないですかね。
  • id:fiwa
    使用しているsvgzファイルそのものに問題がある可能性はないですか?
    こんな話もあったので。
    http://vectorgraphics.blog33.fc2.com/blog-entry-25.html
  • id:a-kuma3
    >こんな話もあったので。
    XML が BOM 付きだったという結末か。
  • id:halohalolin
    TransFreeBSDさん、fiwaさん、a-kuma3さんありがとうございます。
    来週またsvgzファイルを作り直して試してみます。
  • id:halohalolin
    皆さんありがとうございました。

    サンプルで用いたIllustratorからsvgzファイルに書き出したデータは、以下の操作でIE10でも開けることができました。

    1.svgzファイルの拡張子をgzipに名前変更
    2.gzip形式の拡張子を展開
    3.展開されたファイルの拡張子をsvgに名前変更
    4.svgファイルをgzip形式で圧縮
    5.圧縮ファイルの拡張子をsvgzに名前変更
    6.svgzファイルをサーバにアップロードする
    7.サーバの設定についてsvgzファイルに対応するよう記述する

    要はIllustratorに頼らず、自力でsvgファイルをsvgzファイルに変換しないとIE10では動かないように感じました。
  • id:halohalolin
    今回途中ちょっと投げやりになっていた時もあったのですが、Internet Explorer 10より

    http://vis.uell.net/zensus2011/gemeinden.svgz

    が開けられたので、もう少し頑張ろうと思いなおしていました。
    参考までに。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません