chrome无法完美识别svg图像

Question

xyz.html

<div class="r-view-products">
                <span>KNOW MORE</span>
                <img class="r-arrow-image" src="image/test.svg" alt="image">
            </div>

xyz.scss

.r-view-products {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 1rem;
                font-size: 18px;
                .r-arrow-image {
                    width: 40px;
                    height: 21px;
                    transform: rotate(180deg);
                }
            }

边缘，我得到像

这样的完美图像

但是在Chrome上，它显示为

我的svg文件的代码如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="9.097" height="18.878" style="enable-background:new 0 0 9.097 18.878;" xml:space="preserve"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>

<g class="currentLayer" style=""><title>Layer 1</title><g id="svg_1" class="selected" fill="#ffffff" fill-opacity="1">
    <path style="" d="M7.74,0c0.295,0,0.592,0.095,0.841,0.292C9.168,0.757,9.27,1.61,8.804,2.199l-5.717,7.24l5.717,7.24   c0.466,0.589,0.364,1.442-0.223,1.907c-0.59,0.464-1.443,0.364-1.907-0.224l-6.381-8.082c-0.391-0.494-0.391-1.189,0-1.683   l6.381-8.082C6.941,0.177,7.339,0,7.74,0z" id="svg_2" fill="#ffffff" fill-opacity="1"/>
</g></g></svg>

我的scss / html文件中是否有任何遗漏因为哪个chrome无法完美识别图像？