具有png后退的内联SVG

Question

我在我的标记中使用内联SVG图标（只是一个简单的勾号）。原因是，根据我从服务器获取的数据，我需要更改图标的fill颜色。当要求它作为css中的图像时，我无法做到这一点 或img标记。到目前为止，这是我的标记：

<span class="tick">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-56 1232 9.611 8">
        <path id="tick" d="M2787.5,1382.167l.83-.83,1.617,1.617,6.335-6.335.828.828-7.172,7.172Z" transform="translate(-2843.5 -144.619)"/>
    </svg>
</span>

和CSS：

.tick {
    width: 10px;
    height: 8px;
    float: left;
    margin: 2px;
    background: transparent url(../../img/chat/tick.png) center/cover no-repeat;
}
.tick svg {
    display: block;
    fill: #2196F3;
}

这种方式无论是否支持SVG都不会要求图像。 所以我想知道有没有办法将图标显示为SVG并仅在万一中请求png 没有SVG的支持。

顺便说一下，我使用的图片大小没什么，但是我在JS框架的组件中使用它。所以每一次 组件是在我的应用程序中创建的，它发送了对png文件的请求，这让我很烦恼。