どうも、フロントエンドエンジニアのくらげです。
今回、webサイトを作っていて、svg画像の表示がどうしてもうまく生かず、予想外に時間を取られたので共有しておこうかと思います。

やりたかったこと

illustratorで書き出したsvgのアイコンを、固定サイズで画面に表示させたかった。

問題

chromeだと問題なく表示された。
が、edgeでみてみると、svg画像が切れて表示されている...
もう少し調べてみると、ウィンドウ幅を変えるたびに切れたり切れなかったりする。
つまりウィンドウの比率によって画像サイズが変わっている？？？

コード

<div class="box">
  <p>mozimozimozi</p>
</div>

.box {
  background-color: blue;
  width: 500px;
  height: 70px;
  font-size:24px;
  color: #FFFFFF;
  position: relative
}
.box::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;  
  background-image: url(ここに画像指定);
}

やってみたこと

svgデータにwidthとheightの情報を追加してみる。
illustratorで画像を書き出し直す。
擬似要素のbefore,afterのbackgroundに表示させていた部分をやめる
background-sizeを指定する

どれも解決できず。

代価案

imgタグで入れる
svgタグで入れる
切れても大丈夫なように少し余白をつけて書き出す

結局、今回はimgタグで入れることにしました。
imgタグで入れた場合、ウィンドウサイズを変えても、上記のような問題は起こりませんでした。
また、会社の同期は書き出し段階で少し隙間を作って書き出したと言っていました。

もし、この問題の原因や解決方法を知っておられる方いらっしゃったら教えていただけると嬉しいです。