ブラウザに圧縮SVG (.svgz) を表示する

Webでの利用

SVGを表示できるはずのブラウザは基本的にどれも圧縮SVG (.svgz) を表示できるはずですが、設定が整っていないとうまく表示できない場合があります。

SVGを表示するためのHTTPヘッダ

ブラウザが画像を表示する際、ファイルタイプを識別するためにHTTPヘッダを参照します。中にはHTTPヘッダに頼らず自分でファイルを解析してタイプを判断するOperaのようなブラウザもありますが、大半のブラウザはHTTPヘッダを参照するようになっています。

こうしたブラウザで正しくSVGを表示するためには、HTTPヘッダが次の内容を含んでいる必要があります。

ファイルタイプ HTTPヘッダ
.svg Content-Type: image/svg+xml
.svgz Content-Type: image/svg+xml
Content-Encoding: gzip

このようなHTTPヘッダを出力するには、Webサーバ側でそのように設定する必要があります。

HTTPヘッダの確認方法

HTTPヘッダに必要な情報が正しく含まれているかどうかを確認するには、次のような方法があります。

  • ブラウザの機能を利用（HTTPヘッダ表示機能のあるブラウザの場合）
  • ブラウザのアドオンを利用（HTTPヘッダ表示機能のあるアドオンがある場合）
  • WiresharkなどのLANアナライザを利用

ブラウザによって多少機能に違いがありますが、代表的なブラウザでの確認方法をご紹介します。

Internet Explorer 9以上

バージョン9以上のInternet Explorerでは、F12を押すと開発者ツールを起動できます。開発者ツールを使って次の手順で、HTTPヘッダの内容を表示することができます。

  1. F12を押して開発者ツールを起動します。
  2. 「ネットワーク」を選択します。
  3. F5を押してキャプチャを開始します。
  4. HTTPヘッダを確認したいページをブラウザで開きます。
  5. Shift+F5を押してキャプチャを終了します。
  6. キャプチャされたURLリストの中からHTTPヘッダを表示したいURLを選択します。
  7. 「詳細」をクリックします。
  8. 「応答ヘッダー」をクリックします。

これで表示されるものが、確認したいHTTPヘッダです。

Firefox

Firefoxには、Live HTTP headersというHTTPヘッダを簡単に確認できるアドオンがあります。このアドオンをインストールすると、ページ上で右クリックして「ページ情報を開く」を選択すると表示されるページ情報に「ヘッダ」というタブが追加され、HTTPヘッダの内容が確認できるようになります。

アドオンを利用しない方法では、Webコンソールを利用する方法があります。WebコンソールはInternet Explorer上の開発者ツールと似たツールで、Altキーを押してメニューから「ツール(T) → Web開発(W) → Webコンソール(W)」を選択します。ショートカットのCtrl+Shift+K (MacではCommand+Option+K) でも開くことができます。

Webコンソールを使ってHTTPヘッダを確認するには、次のようにします。

  1. Ctrl+Shift+KでWebコンソールを開きます。
  2. 上の段のメニューから「ネットワーク」を選択します。
  3. ブラウザ上でHTTPヘッダを確認したいページを開きます。
  4. キャプチャされたリストの中の「ファイル」と「ドメイン」から、HTTPヘッダを表示したいURLを選択します。
  5. リストの右側にヘッダ内容が表示されます。

これで表示される「応答ヘッダ」が、確認したいHTTPヘッダです。

Opera

開発者用ツールの中のWebインスペクションを使ってHTTPヘッダを確認することができます。

  1. Operaのプルダウンメニューから「その他のツール(M) → 開発者用ツールを有効にする(E)」を選択します。（すでに選択済みなら、この手順はスキップしてください。）
  2. Ctrl+Shift+I またはOperaのプルダウンメニューから「開発者用ツール(D) → Webインスペクタ(W)」を選択してWebインスペクタを開きます。
  3. Webインスペクタのメニューから「Network」を選択します。
  4. HTTPヘッダを確認したいページをブラウザで開きます。
  5. 「Name Path」から、HTTPヘッダを確認したいURLを選択します。
  6. 右側に表示される情報欄の「Headers」を選択します。

ここに表示される「Response Header」が、確認したいHTTPヘッダです。

Chrome

内蔵されたWeb開発ツールを利用して、HTTPヘッダを確認することができます。

  1. chrome://net-internals/#events にアクセスします。
  2. 検索窓に「type:URL_REQUEST」と入力して、URL_REQUESTの情報に絞り込みます。
  3. リストの中から、HTTPヘッダを確認したいURLを選択します。
  4. 右側に詳細情報が表示されます。

この中にあるHTTP_TRANSACTION_READ_RESPONSE_HEADRESが、確認したいHTTPヘッダです。

Webサーバの設定

mime.types と httpd.conf (Apache)

自分自身がサーバ管理者の場合には、Webサーバの設定を変更することでSVGの表示に必要なヘッダを出力させることができます。Apacheの場合、この設定は次のファイルで行います。

  • mime.types
  • httpd.conf

インストール環境によりファイルの置かれている場所が異なるので、自分のシステムでの場所を確認した上で編集してください。

まず、mime.typesに次の行が含まれているかどうかを確認します。

image/svg+xml svg svgz

含まれていなかった場合、httpd.confの
セクションに次の行を追加します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

含まれていた場合には、AddEncodingの行のみ追加します。

必要な変更を加えたら、Webサーバーを再起動して変更を反映させます。

.htaccess

レンタルサーバを利用している場合など、自分自身がサーバ管理者でない場合には、.htaccessで設定する方法があります。Webサーバの再起動が不要で、手軽に変更できます。

ドキュメントのトップディレクトリの.httaccessファイルを編集し、次の2行を追加します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

特定のSVGファイルのみ表示できない場合

HTTPヘッダはきちんと設定できているのに、特定のSVGファイルのみブラウザで表示できないことがあります。このような場合には、次のことを確認してください。

  • gzip形式で圧縮されていること。(zip形式ではありません。)
  • 解凍したSVGファイルの中身が正常であること。

圧縮SVGファイルはSVGファイルをgzip形式で圧縮し、拡張子をsvgzとしたものです。圧縮形式が間違っていたり、中身のSVGが正常でないと表示することができません。