もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariやChromeなどでは問題無く表示されるのに、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;">
