質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

3348閲覧

svg画像が表示されない

usiko

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1グッド

2クリップ

投稿2018/01/22 21:10

編集2018/01/22 21:13

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

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

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

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

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

svg

1<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が同じ階層にあることもあり、間違ってはいないと思われます)

yokoyamax👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

その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で動作しません.

投稿2018/01/22 22:42

編集2018/01/23 01:31
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usiko

2018/01/23 00:17

ご回答ありがとうございます! 言われた通り、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

2018/01/23 00:26

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

2018/01/23 00:31

そうなんですね、、、 Chromeで、他のサイトのsvgは正常に表示されているのに、私のサイトの画像だけ表示されないのはどういうわけなのでしょうか。 実は初めてのサイト制作でして、クレームなどもどうしていいのか、、、 (検索してみますね!) 当該SVGファイルを提示する、というのはどういう意味でしょうか? 質問欄にコードを載せましたが、そういうことではないんですよね? (いろいろわかっていなくて、すみません)
defghi1977

2018/01/23 00:34 編集

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

2018/01/23 00:37

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

2018/01/23 00:37

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

2018/01/23 00:38

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

2018/01/23 00:45

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

2018/01/23 00:46

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

2018/01/23 00:51

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

2018/01/23 01:18

本当にいろいろとありがとうございました。 ようやく解決しました。。。m(_ _)m 実はwidthとheightを書いただけでは解決しなかったのですが、 どうやら、イラレで書き出すときのオプションで「レスポンシブ」を選択してしまうと、 svgの中にviewBoxの記述が現れるのですが、これが原因?だったようです。 「レスポンシブ」のチェックを外して書き出したところ、Chromeでも正常に表示されまして、 正常に出た方と出ない方の違いは何か、と見たところ、viewBoxの有無のようでした。 SVGOMGの最適化、の方は、最適化したバージョンとしないバージョンで両方試しましたが、結果は同じでした。 イラレのオプションなんて、使われてなければわからないことですよね。(> <) でもたくさんのヒントをいただけたおかげで、何時間も立ち止まっていた問題を、解明することができました!! defghi1977さん、sousukeさん、本当にありがとうございました!!
defghi1977

2018/01/23 01:22

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

2018/01/23 01:37

ご丁寧に、回答への補足もありがとうございます! 私が自己解決の方に書くべきだったのかもしれませんね。 (実際には「自己解決」とも言えませんが…) お手数をおかけしてしまいました。 これでやっとスッキリしてこの先の作業を進められます! 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問