回答編集履歴
5
コメントの内容を回答に反映
answer
CHANGED
|
@@ -26,6 +26,16 @@
|
|
|
26
26
|
|
|
27
27
|
この問題は`width`,`height`属性(ないしはグラフィックサイズを指定するCSSプロパティ群)を指定することで解決します.
|
|
28
28
|
|
|
29
|
+
イラストレーターでSVGを出力している場合は下記の対処が挙げられます.
|
|
30
|
+
|
|
31
|
+
> どうやら、イラレで書き出すときのオプションで「レスポンシブ」を選択してしまうと、
|
|
32
|
+
svgの中にviewBoxの記述が現れるのですが、これが原因？だったようです。
|
|
33
|
+
「レスポンシブ」のチェックを外して書き出したところ、Chromeでも正常に表示されまして、
|
|
34
|
+
正常に出た方と出ない方の違いは何か、と見たところ、viewBoxの有無のようでした。
|
|
35
|
+
|
|
36
|
+
NOTE:
|
|
37
|
+
`width`,`height`属性が設定されていた際に`viewBox`属性を省略すると値`0 0 width height`が与えられたものとして解釈されます.
|
|
38
|
+
|
|
29
39
|
---
|
|
30
40
|
その3
|
|
31
41
|
|
4
回答を追加・コメントを修正
answer
CHANGED
|
@@ -24,4 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
このようなSVGをCSS等で利用すると, WEBブラウザの種類やその読み込み方によって**グラフィックのサイズが変化します**. Chromeで表示されないように見えるのは, 何もない左上部だけがスクリーンに表示されているためです.
|
|
26
26
|
|
|
27
|
-
この問題は`width``height`属性を指定することで解決します.
|
|
27
|
+
この問題は`width`,`height`属性(ないしはグラフィックサイズを指定するCSSプロパティ群)を指定することで解決します.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
その3
|
|
31
|
+
|
|
32
|
+
因みにSVGファビコンはChromeで動作しません.
|
3
回答を追加
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
その1
|
|
2
|
+
|
|
1
3
|
まず確認すべきは, WEBサーバーがSVG文書を正しくmimeタイプ`image/svg+xml`として送信しているかです. これはWEBブラウザ側で受け取ったレスポンスヘッダで確認できます.
|
|
2
4
|
|
|
3
5
|
NOTE:レスポンスヘッダはFireFoxであればページ情報等で確認できます.
|
|
@@ -7,4 +9,19 @@
|
|
|
7
9
|
|
|
8
10
|
NOTE:なお.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません.
|
|
9
11
|
|
|
10
|
-
WEBサーバー側で対処できないのであれば, ajaxでSVG文書を取得し, その内容をWEBページに埋め込むことが可能です.
|
|
12
|
+
WEBサーバー側で対処できないのであれば, ajaxでSVG文書を取得し, その内容をWEBページに埋め込むことが可能です.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
その2
|
|
16
|
+
|
|
17
|
+
当該SVG文書が正しくmimeタイプ`image/svg+xml`で送信されており, ChromeでのみSVGが表示されないということからSVGそのものに問題があります.
|
|
18
|
+
|
|
19
|
+
提示のSVGコードは`width`,`height`属性が付与されていないことから, 所謂**レスポンシブなSVG**, つまり可変サイズのSVGであることが判ります.
|
|
20
|
+
```
|
|
21
|
+
<!--SVG-->
|
|
22
|
+
<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>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
このようなSVGをCSS等で利用すると, WEBブラウザの種類やその読み込み方によって**グラフィックのサイズが変化します**. Chromeで表示されないように見えるのは, 何もない左上部だけがスクリーンに表示されているためです.
|
|
26
|
+
|
|
27
|
+
この問題は`width``height`属性を指定することで解決します.
|
2
コメントを改訂
answer
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
NOTE:レスポンスヘッダはFireFoxであればページ情報等で確認できます.
|
|
4
4
|
|
|
5
|
-
もしSVG文書を`text/plain`ないしは`text/html`で送信しているのであれば, WEBサーバー側で.htaccessの上書き等が有効となっていない(許可されていない)ことが考えられます.
|
|
5
|
+
もしSVG文書を`text/plain`ないしは`text/html`で送信しているのであれば, WEBサーバー側で.htaccessの上書き等が有効となっていない(許可されていない)ことが考えられます.(SVGには理論上悪質なスクリプトを仕込むこともできるため, 意図的に直接画像ファイルとして表示できないようにしている可能性があります.)
|
|
6
|
+
WEBサーバーの管理者にSVGを使いたい旨で相談して下さい.
|
|
6
7
|
|
|
7
|
-
NOTE:.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません.
|
|
8
|
+
NOTE:なお.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません.
|
|
8
9
|
|
|
9
10
|
WEBサーバー側で対処できないのであれば, ajaxでSVG文書を取得し, その内容をWEBページに埋め込むことが可能です.
|
1
コメントを追加
answer
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
まず確認すべきは, WEBサーバーがSVG文書を正しくmimeタイプ`image/svg+xml`として送信しているかです. これはWEBブラウザ側で受け取ったレスポンスヘッダで確認できます.
|
|
2
|
+
|
|
2
3
|
NOTE:レスポンスヘッダはFireFoxであればページ情報等で確認できます.
|
|
3
4
|
|
|
4
5
|
もしSVG文書を`text/plain`ないしは`text/html`で送信しているのであれば, WEBサーバー側で.htaccessの上書き等が有効となっていない(許可されていない)ことが考えられます.
|
|
5
|
-
NOTE:.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません. WEBサーバーの管理者と相談して下さい.
|
|
6
6
|
|
|
7
|
+
NOTE:.htaccessはapache専用の仕組みなので, これ以外のWEBサーバーを使っている場合に意味がありません. WEBサーバーの管理者と相談して下さい. (SVGには理論上悪質なスクリプトを仕込むことも可能であるため, 意図的に直接画像ファイルとして表示できないようにしていることも考えられます.)
|
|
8
|
+
|
|
7
9
|
WEBサーバー側で対処できないのであれば, ajaxでSVG文書を取得し, その内容をWEBページに埋め込むことが可能です.
|