WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

IE・EdgeでSVG画像が表示されない時に気をつけるポイント

f:id:yachin29:20170905125623j:plain

もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。

その場合に気をつけて欲しいポイントはSVGタグ内の「width」と「height」の記述です。
SVGの書き出し方によってはSVGタグ内の「width」と「height」が省略されてしまう場合があります。そういったSVGデータをIE11やEdgeで見ると、大きさが極端にずれていたり、表示されなかったり、という事が起こります。

このように「width」と「height」の値が省略されている場合は、追加で記述しましょう

<svg  x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >

このように「width」と「height」の値を追加します。

<svg  x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;" >


また、書き出し方によっては、viewBoxの値とstyleの値がずれている場合があるので、その場合は「width」と「height」を追加するだけでは無く、viewBoxの値とstyleの値と「width」「height」の値を揃えましょう。

<svg x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >

viewBoxの値とstyleの値と「width」「height」の値を揃える

<svg  x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;">