svg画像が表示されない

Question

表題の通りなのですが、イラレで作成したsvg画像をSVGOMGで最適化し、いくつか使っているのですが、Dreamweaverのライブビューでは問題なく表示されていたのですが、サーバーにアップしたところ、すべてのsvg画像がまったく表示されていない状態です。

こちらのページなど参照し、htaccessなどの記述もやってみました。
（Dwで新規ページ作成で空のページに以下を書いただけですが、合ってますよね？）

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

ファイルのタイトルは先のリンク先を参照し、「.htaccess」にしてあります。
（当方Macで作業しているので、一度、「.」から始まるファイルを作成できないというエラーが出ましたが、そのまま保存してみたところ、サーバー上のファイルはちゃんと「.htaccess」となっている模様です）

使っているsvg画像の例として、Fbアイコンのコードは以下です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.7 64.7"><path d="M32.3 0C14.5 0 0 14.5 0 32.3c0 17.8 14.5 32.3 32.3 32.3 17.8 0 32.3-14.5 32.3-32.3C64.7 14.5 50.2 0 32.3 0zm8.1 33.5h-5.3v18.8h-7.8V33.5h-3.7v-6.6h3.7v-4.3c0-3.1 1.5-7.9 7.9-7.9H41v6.4h-4.2c-.7 0-1.7.3-1.7 1.8v3.9H41l-.6 6.7zm0 0" fill="#808072"/></svg>

html内でimgリンクで配置しても、css内でbackgroundで表示させても、どちらのパターンでも表示されません。

（サイトの見た目としては、壊れたファイルのアイコンや「?」のアイコンが出てしまう箇所と、まったく何も表示されない箇所があります）

一体何が原因なのでしょうか。
一度諦めて、すべてjpgやpng画像に差し替えてみたりもしたのですが、やはり明瞭度が全然ちがうのでsvgを諦めきれず…。
原因究明のための検索で何時間も経過しております。。

お判りの方がいたら、教えていただけましたら幸いです。

補足：該当する画像をサーバーにアップできていないですとか、相対パスの書き方が違うということではないと思います。
（少なくとも、画像は確実にサーバーのフォルダ内にあり、パスについてはファイルを選ぶとDwが自動で記述してくれるので、、、。htmlとcssが同じ階層にあることもあり、間違ってはいないと思われます）

Answer 1

その1

まず確認すべきは, WEBサーバーがSVG文書を正しくmimeタイプimage/svg+xmlとして送信しているかです. これはWEBブラウザ側で受け取ったレスポンスヘッダで確認できます.

NOTE:レスポンスヘッダはFireFoxであればページ情報等で確認できます.

もしSVG文書をtext/plainないしはtext/htmlで送信しているのであれば, WEBサーバー側で.htaccessの上書き等が有効となっていない(許可されていない)ことが考えられます.(SVGには理論上悪質なスクリプトを仕込むこともできるため, 意図的に直接画像ファイルとして表示できないようにしている可能性があります.)
WEBサーバーの管理者にSVGを使いたい旨で相談して下さい.

NOTE:なお.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません.

WEBサーバー側で対処できないのであれば, ajaxでSVG文書を取得し, その内容をWEBページに埋め込むことが可能です.

---

その2

当該SVG文書が正しくmimeタイプimage/svg+xmlで送信されており, ChromeでのみSVGが表示されないということからSVGそのものに問題があります.

提示のSVGコードはwidth,height属性が付与されていないことから, 所謂レスポンシブなSVG, つまり可変サイズのSVGであることが判ります.

<!--SVG-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.7 64.7"><path d="M32.3 0C14.5 0 0 14.5 0 32.3c0 17.8 14.5 32.3 32.3 32.3 17.8 0 32.3-14.5 32.3-32.3C64.7 14.5 50.2 0 32.3 0zm8.1 33.5h-5.3v18.8h-7.8V33.5h-3.7v-6.6h3.7v-4.3c0-3.1 1.5-7.9 7.9-7.9H41v6.4h-4.2c-.7 0-1.7.3-1.7 1.8v3.9H41l-.6 6.7zm0 0" fill="#808072"/></svg>

このようなSVGをCSS等で利用すると, WEBブラウザの種類やその読み込み方によってグラフィックのサイズが変化します. Chromeで表示されないように見えるのは, 何もない左上部だけがスクリーンに表示されているためです.

この問題はwidth,height属性(ないしはグラフィックサイズを指定するCSSプロパティ群)を指定することで解決します.

イラストレーターでSVGを出力している場合は下記の対処が挙げられます.

どうやら、イラレで書き出すときのオプションで「レスポンシブ」を選択してしまうと、

svgの中にviewBoxの記述が現れるのですが、これが原因？だったようです。
「レスポンシブ」のチェックを外して書き出したところ、Chromeでも正常に表示されまして、
正常に出た方と出ない方の違いは何か、と見たところ、viewBoxの有無のようでした。

NOTE:
width,height属性が設定されていた際にviewBox属性を省略すると値0 0 width heightが与えられたものとして解釈されます.

---

その3

因みにSVGファビコンはChromeで動作しません.

Comments

[usiko]

ご回答ありがとうございます！
言われた通り、Firefoxにて確認してみましたところ、なんとFirefoxでは正常に表示されておりました。
（最初に私が確認してsvg画像が表示されなかったのはchromeでした）

Firefoxのページ情報で、該当画像を選択すると、

MIMEタイプ:SVG+XML 画像

と出ておりました。

safariでも確認し、またsafariの開発ツールのユーザーエージェントを変えてみますと、
Safari、IE、Chromeにしても正常に表示されるのですが、やはり実際のChromeで見ると表示されません。

このような記事も見つけましたが
https://qiita.com/hibikikudo/items/4d5678b041d55bb3fcca

私の使用しているsvgファイルの中には該当のコードが見当たらず、、、
何かファイルを書き換えることで解決することでしょうか。

ちなみにサーバーは、Xドメインを取得すると無料で使用できるレンタルサーバーです。

この辺りとか
https://www.xdomain.ne.jp/manual/man_server_htaccess.php

この辺り
https://www.xdomain.ne.jp/manual/man_server_mime.php

が関係ありますか？
（すみません、.htaccessやMIME設定などについては私はまったくわかりません。。）

[defghi1977]

WEBサーバー側で正しいmimeを返しているのであれば, 純粋にChrome側の問題です. この類の不具合はブラウザのフィードバックに当該SVGファイルの実行結果や事象についてがんがんクレームを入れましょう. バグの指摘は開発者側でも役に立ちます.
なお, 当該SVGファイルを提示することは可能でしょうか？

[usiko]

そうなんですね、、、
Chromeで、他のサイトのsvgは正常に表示されているのに、私のサイトの画像だけ表示されないのはどういうわけなのでしょうか。
実は初めてのサイト制作でして、クレームなどもどうしていいのか、、、
（検索してみますね！）

当該SVGファイルを提示する、というのはどういう意味でしょうか？
質問欄にコードを載せましたが、そういうことではないんですよね？
（いろいろわかっていなくて、すみません）

[defghi1977]

可能であれば（サーバーに上げた）当該SVG画像へのリンクを貼っていただけないかと
→勘違い！すみません

[sousuke]

横からすみません。他のsvg（usiko氏が作ったものでない）が表示できないか試したほうがいいと思います。最適化する前のものは表示できるのかとかですね。問題の切り分けをしたほうがいいです。

[sousuke]

あ、書いてるうちに色々されてたm(_ _;)m

[defghi1977]

原因わかった！SVG画像にwidthとheightが設定されていない

[usiko]

あ！ほんとうです！
試しに、他のサイトからsvg画像を拝借して載せてみましたら、chromeでもちゃんと表示されました！
ということは、、私のsvgの何を書き換えたら良いのでしょう。
（イラレで書き出す時の設定の問題でしょうか。。）
最適化する前のファイルもちょっと試してみますね！

[usiko]

あ、すみません、入れ違いでコメントしてしまいました。
widthとheightは、画像を可変にしたい場合でも記述して大丈夫ですか？（ウィンドウサイズが変わるとそれに伴って画像サイズも変えたいのですが、widthとheightを記述しても効きますか？）

[defghi1977]

> widthとheightは、画像を可変にしたい場合でも記述して大丈夫ですか？
svg要素のwidth/height属性はimg要素等の外部からサイズを指定されなかった際の既定値として利用されるので, 問題ありません.

[usiko]

本当にいろいろとありがとうございました。
ようやく解決しました。。。m(_ _)m

実はwidthとheightを書いただけでは解決しなかったのですが、

どうやら、イラレで書き出すときのオプションで「レスポンシブ」を選択してしまうと、
svgの中にviewBoxの記述が現れるのですが、これが原因？だったようです。

「レスポンシブ」のチェックを外して書き出したところ、Chromeでも正常に表示されまして、
正常に出た方と出ない方の違いは何か、と見たところ、viewBoxの有無のようでした。

SVGOMGの最適化、の方は、最適化したバージョンとしないバージョンで両方試しましたが、結果は同じでした。

イラレのオプションなんて、使われてなければわからないことですよね。(> <)
でもたくさんのヒントをいただけたおかげで、何時間も立ち止まっていた問題を、解明することができました！！

defghi1977さん、sousukeさん、本当にありがとうございました！！

[defghi1977]

イラストレーターについてのコメントを回答に追加しておきますね

[usiko]

ご丁寧に、回答への補足もありがとうございます！
私が自己解決の方に書くべきだったのかもしれませんね。
（実際には「自己解決」とも言えませんが…）
お手数をおかけしてしまいました。

これでやっとスッキリしてこの先の作業を進められます！
本当にありがとうございました！