SVG形式のファイルがCSSで読み込めないとき

svg形式のファイルをcssで読み込んでも、表示されなくて困った。

Content-Typeが怪しいので、httpリクエストを送信してヘッダを確認

※-k　ssl証明書のエラーを無視するよ

curl --head -k https://stg.*******

text/plainで返ってきている。
webサーバがsvg形式に対応できてないのかなと、想像。

HTTP/1.1 200 OK
Date: Fri, 09 Nov 2018 07:32:32 GMT
Server: Apache
Set-Cookie: Apache=******.1541748752550988; path=/; expires=Mon, 06-Nov-28 07:32:32 GMT
Last-Modified: Fri, 09 Nov 2018 06:48:36 GMT
ETag: "15769f-272-57a35bd93f900"
Accept-Ranges: bytes
Content-Length: 626
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Origin: *
Content-Type: text/plain

apacheのhttpd.confを修正

TypeとEncodingにsvgを追加する。

ssh ***
sudo su - 
cp /etc/httpd/conf/httpd.conf{,.20181109}
vim /etc/httpd/conf/httpd.conf
diff /etc/httpd/conf/httpd.conf{,.20181109}
140c140
< AddEncoding x-gzip gz tgz svgz
---
> AddEncoding x-gzip gz tgz
210d209
< AddType image/svg+xml svg svgz

service httpd configtest
service httpd restart

動作確認

curl --head -k https://****

Cointent-Type が image/svg+xmlになって、正常に表示された。

HTTP/1.1 200 OK
Date: Fri, 09 Nov 2018 07:32:32 GMT
Server: Apache
Set-Cookie: Apache=******.1541748752550988; path=/; expires=Mon, 06-Nov-28 07:32:32 GMT
Last-Modified: Fri, 09 Nov 2018 06:48:36 GMT
ETag: "15769f-272-57a35bd93f900"
Accept-Ranges: bytes
Content-Length: 626
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Origin: *
Content-Type: image/svg+xml