【edgeバグ】backgroundで入れたsvg画像がウィンドウサイズによって幅が変わってしまう問題【未解決】

どうも、フロントエンドエンジニアのくらげです。
今回、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タグで入れた場合、ウィンドウサイズを変えても、上記のような問題は起こりませんでした。
また、会社の同期は書き出し段階で少し隙間を作って書き出したと言っていました。

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