svgのタグが付けられている記事の一覧です。

SVG がうまく表示されない場合は、サーバーの設定を確認してみる

いつものように、詰まった作業に関しての個人的な備忘録。今回は、ブラウザで SVG がうまく表示されなかった際には、サーバーの設定を確認してみましょう、というお話。

詰まった箇所

このブログのフッターにある各サービスへのリンクのアイコンを SVG 形式にしてみようと思い、Retina対応にSVGを使う方法とリンクを張る時の注意点 | Dress Cordingというページを参考にローカルで作業。問題なく表示されたので、本番環境(ロリポップ!)にアップしたところ、何故か何も表示されない。フォールバックの PNG ファイルもダメ。ローカルで OK で、サーバー上で NG ということは、サーバー関連の問題かなあと検討をつける。

過程

とりあえず、今利用しているロリポップ!で何かしらの作業が必要かなと思ってググったところ、こんなツイートを発見。

ということで、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 を作成して設置する。