もうSVGはどのブラウザでもサポートされているので普通に使えると思ったのですが、なぜか表示されずちょっとハマってしまったので備忘録として残しておきます。
IE,EdgeではSVGタグにはwidthとheightが必要
htmlやcssの設定ではなく、imgや背景画像としてSVGファイルを読み込んで使う際には、SVGファイル内のsvgタグにwidthとheightを明記しておく必要があるようです。
イラレからSVGを書き出すと下記のように省略されていることもあるので注意した方が良さそうです。
<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 73">
これをこうしておけばOKです。
<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 73" width="166" height="73">
今までも結構SVGは使ってきましたが、ファイル読み込みだとサーバーの古さによっては対応してないため基本htmlに記述して使用していたのでこの事象は知りませんでしたね〜。
