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
スポンサーサイト



SVGで多角形を簡単に描く

お久しぶりです。

前に書いたJavascriptができてたので紹介を。

「SVG-JS」といいます。

今のところは正多角形と星型を(SVGの基本図形のような感覚で)作ることができます。

●使い方
まず使いたいHTMLのヘッダで以下のようにjsファイルを読み込みます。

<script src="./SVG-JS.js"></script>

諸般の都合でクラス名(要素にclass属性で指定された文字列)から検索して要素を取得するためにHTML5で導入された規格に基づくメソッド(getElementsByClassName)を使用しています。
これからHTML5規格準拠のブラウザが普及するにつれて問題なくなると考えていますが、当然古いブラウザでは動作しません。もしそのようなブラウザもサポートする場合は「prototype.js」を以下のように読み込んでください。

<script src="./prototype.js"></script>

prototype.jsはprototypejs.orgからダウンロードできます。
SVG-JS.js本体はこちらから。

またSVGファイルを別に作ってobject要素などでHTMLに埋め込む場合は、SVGはXMLなので次のようにします:
<script xlink:href="./prototype.js"></script>
<script xlink:href="./SVG-JS.js"></script>

href属性ではなく、xlink:href属性であることに注意してください。
実際のSVG内には以下のように記述します。

正多角形の場合:
<g class="rpoly" num="5" r="100" stroke="#000000" stroke-width="1" fill="none"></g>

星型の場合:
<g class="star" num="5" inr="40" outr="100"></g>

rpoly(RegulerPOLYgon)とstarともに、頂点の数はnum属性で指定します。

rpolyのほうは半径としてr属性を指定するとその半径の円に内接する正多角形を描きます。

starの方は、二つ半径があってinrが内側の半径を、outrが外側の半径を表します。そうなる必然的な理由は特にありませんがinrは基本的に必須指定です。outrは省略すると自動的にinrの倍が指定されます。

ちなみに特段内側と外側というのに意味はありません。outrをinrより小さくすればそうなります。

あとinrやoutr、r属性に指定する値は単位を付けないでください。パーセント(%)指定などは使えません。ごめんなさい。

上以外のプレゼンテーション属性(strokeなど)は基本図形(rect要素など)とまったく変わりません。

描画される中心の位置がそのままではSVGの(0,0)の位置になるので、transform属性で移動して利用してください。傾きの角度なども同じです。

サンプルファイルを置いておきます。SVG規格準拠のSMILアニメーションを利用していますが<g>要素の子要素で指定した通りのアニメーションが基本図形などと同様に利用できているのがわかると思います。

続きを読む

プロフィール

f(t)=k

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

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

この人とブロともになる

QRコード
QR