How to modify the fill color of an SVG image when being served as background image?

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

polygon.mystar {     fill: blue; }​  circle.mycircle {     fill: green; } 

This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.

html {           background-image: url(../img/bg.svg); } 

How can I change the colors now? Is it even possible?

For reference, here are the contents of my external SVG file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"      width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679      118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/> <circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/> </svg> 

Answer 1

You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element.

.icon {     background-color: red;     -webkit-mask-image: url(icon.svg);     mask-image: url(icon.svg); } 

For more see this great article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images