LoginSignup
3

More than 1 year has passed since last update.

サーバー環境でsvgを表示させる方法。

Last updated at Posted at 2020-11-26

ローカルで表示されていたsvgが、サーバー環境で表示されないとき。

xfreeのサーバーでアップロードし作成したサイトを見たときsvgの部分だけ表示出来ませんでした。(他のpngとかは問題なし)

画面でいうとこんな感じです。

スクリーンショット 2020-11-26 22.58.00.png

最初はアセットパイプラインかなんかが影響してるのかなって思ったのですが、調べていると拡張子のメタ情報が追加されてないことが原因とわかりました。

実際には以下のコードを.htaccssに追加し、svgをサーバー環境で認識させました。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

これで無事SVG画像が表示されました。

スクリーンショット 2020-11-26 23.02.51.png

ちなみにAddTypeとAddEncodingを調べてみましたが、AddTypeがメタ情報に.svgと.svgzを認識させるコードで、AddEncodingが.svgzがgzipである事を認識させるコードらしいです。

補足

.htaccess(ドット エイチティ アクセス)はwebサーバーの動作制御系のファイルです。

サーバーのhome dir(ホームディレクトリ)配下に配置します。
※ホームディレクトリとは基本的にはエントリーポイントであるindex.htmlが設置されている階層のことです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3