Inline SVG with png fallback

Question

I'm using a inline SVG icon (just a simple tick) in my markup. the reason being this, is that depending on the dataI get from server I need to change the fill color of the icon. Which I cannot do it when requiring it as a image in css or img tag. So far this is the markup I have:

<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>

and 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;
}

This way no matter there is support for SVG or not image is going to be requested. So I want to know is there any way to display the icon as SVG and requesting the png one only in case there was no support for SVG.

By the way the picture I'm using is just nothing in size but I'm using it in a component with JS framework. So every time component is created in my application it sends the request for the png file which bothers me a lot.