SVG画像がIE11ではみ出すとき、viewBox属性を付与したら直った

現象について

SVG画像を<img>タグで表示していた時に、IE11で表示確認すると、画像が見切れて表示されていた。

※実装したイメージ

<span style="background: #db365d; display: block; height: 24px; padding: 6px 0 0; width: 30px;">
    <img src="heart.svg" alt="Heart" style="width: 18px; height: auto;">
</span>

正常なアイコン

IE１１でのアイコン

解決したこと

画像の width と height に合わせて、viewBox属性と値を入れた。
viewBox="x座標, y座標, width, height"のようなので、viewBox="0, 0, 20, 19"とした。
（あと、heightの小数点を消した）
（あと、preserveAspectRatio="xMinYMid"も入れてみた）

BEFORE

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19.062">
    <path...略 />
</svg>

AFTER

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" preserveAspectRatio="xMinYMid" viewBox="0 0 20 19">
    <path...略 />
</svg>

gulp-imageminを使用している時

(2019/10/24追記)

gulp-imageminは標準設定では、画像を軽量化するためにviewBox属性を消してしまうので、
removeViewBox: trueをfalseに変更した。

参考：
https://www.npmjs.com/package/gulp-imagemin