いつものように、詰まった作業に関しての個人的な備忘録。今回は、ブラウザで SVG がうまく表示されなかった際には、サーバーの設定を確認してみましょう、というお話。
詰まった箇所
このブログのフッターにある各サービスへのリンクのアイコンを SVG 形式にしてみようと思い、Retina対応にSVGを使う方法とリンクを張る時の注意点 | Dress Cordingというページを参考にローカルで作業。問題なく表示されたので、本番環境(ロリポップ!)にアップしたところ、何故か何も表示されない。フォールバックの PNG ファイルもダメ。ローカルで OK で、サーバー上で NG ということは、サーバー関連の問題かなあと検討をつける。
過程
とりあえず、今利用しているロリポップ!で何かしらの作業が必要かなと思ってググったところ、こんなツイートを発見。
ロリポップでSVGを表示するには、MIMEタイプの設定が必要、と。メモメモ。
— 東 孝之さん (@higash) 2012年6月20日
ということで、SVG の MIMEタイプを調べることに。ベクター形式でWebページ上に表示できるSVGでロゴを描いてみた | SUSH-i LOGというページで SVG の MIMEタイプをサーバーに設定するには、以下の記述をした .htaccessファイルが必要であることを確認。
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
ちなみに、.svgz
って何だろうと思って調べたところ、SVG 形式を gzip で圧縮したものということ。gzip 形式って前に何かで見たけど詳しく調べてなかった。今度、調べよう。
で、ロリポップ!で借りているサーバーに、SVG の MIMEタイプを設定してあげるために、ロリポップ!のマニュアルを参考にして、.htaccessファイル作成。上記の内容を記述したファイルを txt 形式でサーバーにアップロード、場所は色々なところで SVG を使うかもなので、ルート直下に配置。こうすることによって、自分が借りているサーバー内では、全てのページで SVG が表示されるようになるはず。ファイル名を「.htaccess」に変更して、パーミッションを 604 に設定して完了。
作業完了後、あらためてサイトを本番環境(ロリポップ!)で確認したところ、ちゃんと SVG が表示されていました。
まとめ
SVG がローカルで表示されて、本番環境で表示されない場合は、サーバーの設定を確認する。MIMEタイプに SVG(SVGZ) の設定がない場合は、.htaccess を作成して設置する。