FC2ブログ

SVGZが見れない問題

こんばんは。

先日SVG-JSを公開させていただいたおかげで、少しはやる気が出たので何年か塩漬けにしていた問題を掘り起こしたら、あっさり片がついたのでさっそく記事に。

問題というのはほかでもなく、タイトル通り、SVGZ画像が表示されない問題です。

SVGはみなさんご存知XMLによるベクトル画像のファイル形式です。
SVGに限らず、ベクトル画像のファイル形式全般に言えることですが、「拡大縮小(表示)しても画像が荒れない」というメリットの反面、ベクトル画像は「使用するサイズを小さくしてもファイルサイズは小さくならない」という欠点もあります。

対策としては、小さく使うベクトル画像のなかのさらに小さいオブジェクトは削除してしまうとか、思い切って小さな画像はラスター画像に変換したものを使うとかが考えられますが、そのような対策だけではベクトル画像そのものが使いやすくはならないので、SVGを規格化しているW3Cが認めている対策の一つがGZIP圧縮です。

GZIP圧縮というのはZIPやLHA圧縮と似た、デジタルデータの圧縮方式の一つで、オープンなライセンスで開発されているほか、多くの後継規格に比べれば圧縮率などで負けるものの、(SVGやXMLのような)テキストデータなど、"圧縮しやすい"部類のデータには十分な圧縮効率を持つことなど多くの利点を持っています。

通常GZIP圧縮を施したファイルは".gz"等の拡張子を持ちますが、SVGの規格では、SVGファイルを単にGZIP圧縮したファイルに".svgz"の拡張子を付けることを認めており、これが表題の"SVGZ"です。実際最近では時々WEBサイトにも使われているようです。

ところが、SVG-JSのサンプルとして私が作成したSVGZファイルは最近までメジャーなブラウザ(Chrome,FireFox,InternetExplorer,Opera,Safari)では全く閲覧できなかったのです。しかもInternetExplorer以外はなんだかまともそうなエラーを吐いていたのであきらめていたのです。

少しGoogleなどで「SVGZ 見れない」などと調べると、「サーバーがContent-Type(MIME Type)を正しく返すように設定してください」「.htaccessファイルで正しいHTTPヘッダを返すよう設定」などのサイトはありますが、そのどれを試しても駄目でした。

もちろんサーバーは自宅サーバ(Apache)とFC2のレンタルサーバーの二つでいろいろ試しましたが無理だったので、あきらめていたのです。

しかし今回はようやく解決しました。やったのは三つです。
(1).htaccessを確認
(2)svgファイルの謎の先頭部分を消去
(3)アーカイバの交代

あきらめていたことを再開するにはきっかけというものがあるもので、WEB上でSVGの情報を調べているときに、SVGべんりやな~などとみている途中に、はたと気づいてその画像のファイル形式を見たら、あらびっくり。SVGZ形式だったのです。その時はChromeで閲覧していたのですがほかのブラウザで見ても正常。これは落として謎を解明するしかない!と思ったわけです。

さて、とはいっても最初はやはりHTTPヘッダの問題なんだろうなとは思いました。
なのでその正しく表示されているファイルを、正しく表示されているサーバから直接表示してもらい、HTTPヘッダを確認したところ、Chromeでは確かに「Content-Type:image/svg+xml」となっていましたが、FireFoxではなぜか「Accept-Type:text/html...」となっておりよくわからないがちゃんと認識されていない風。ということはHTTPヘッダが原因ではないかもと思いなおしました。

そこで、次にやったのは落としたSVGZ画像をGZIPファイルとして解凍し、出てきたSVG画像をテキストエディタで見てみても...変わりありません。そのファイルを参照しながら作ったわけでもないのにxml宣言やDOCTYPE宣言の中身まで一緒でした。ただ気になったのは、コメントで、Illustratorから作成されたらしき跡があったので、自分のSVGファイル(Vista付属のメモ帳で手打ち)とは見えないところで違いがあるかも...?と思いバイナリエディタで閲覧...

正直に言って、差があるとは思いませんでした。でも差がありました。
使用したのはStirlingというバイナリエディタですが、1byteごとに値とともに右側にテキストが表示されます。それを見ると、正しく表示されたSVGでは最初からxml宣言「<?xml...」と始まるのに、私が作った方は謎の先頭部分「・・・<?xml...」のようなものが付いていたので...勇気を出して削除!

しかし実はこれだけではすぐにはうまくいきませんでした。なぜかOperaだけはこの時点でSVGZが表示されたのですが、ほかはNG。ここであきらめたらまた塩漬け行きだったんですが、今回はもうひとひねりしなきゃいかんと思い頑張りました。

実は私、最近、普段使いのアーカイバ(圧縮・解凍ソフト)を変えまして、以前はLhaplus + 7-zipだったのを、Explzhにしたのです。当然まだ使い方は探り探りなのでこの実験の初期段階では、Explzhではなく、昔にw32texをインストールするときに使用したgzipを利用していたのです。そこでExplzhでどうにか(.tar.gzではなく).gz圧縮ができないか2分ほど苦戦(←)したのですがそこはあきらめてLhaplusを再インストール...

しかしその甲斐あってLhaplusで圧縮しなおしたものはFireFoxを除くすべて(InternetExplorerも!)で表示されました。

もちろんこの後もFireFoxでも表示されるよう試行錯誤しました。その一つが.htaccessファイルの確認です。
どうも.htaccessファイルがUTF-8だとうまく動かない(かもしれない)という情報が入ってきたので、ANSI(SHIFT-JIS)になるよう確認。

最終的にその日はいくら確認しても正しく表示されなかったのですが...

本日確認しなおしてみたら正しく表示されました。もう安心しきって確認していませんが、FireFoxのキャッシュとかその辺のリセットが甘かったのでしょうね。

ずいぶん長いこと悩まされてきただけによくわかるのですが、WEBで「SVGZが見れない問題」を検索してもこの手の解決法が出ているところが無いように思われるので特段急いであげてみました。どなたかのお役に立てばと思います。

なお上記エラーを確認した環境は以下の通りです:
OS:Windows Vista SP2
Browser:Chrome26.0.1410.64 m,FireFox17.0.1,InternetExplorer9.0.811216421,Opera12.15Build1748,Safari5.1.7(7534.57.2)
Editer:OS付属のメモ帳(notepad.exe)

また、エラー修正のために利用させていただいたソフトは以下の通りです:
BinaryEditer:Stirling - Vector
Archiver/Compressor:Lhaplus Vector
スポンサーサイト



コメント

非公開コメント

プロフィール

f(t)=k

Author:f(t)=k
ベクトル画像をもっと世に広めたい一般人その1

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR