SVG background-image url – change color

Change color for svg images when inserted via background-image: url

Open the svg icon in a text editor, copy the text from there and paste it into the editor on this site: yoksel.github.io/url-encoder/

IN Ready for CSS we get the code ready for insertion into css styles:

Changing the attribute background-image: url on the mask-image: url and webkit-mask-image: url and set the color as well. The stylistics are given for SCSS:

.icon-add {
background-color: black;

mask-image: url(“data: image / svg + xml,% 3C% 3Fxml version = ‘1.0’ encoding = ‘iso-8859-1’% 3F% 3E% 3Csvg class =” svg-img “version = ‘1.1’ id = ‘Capa_1’ xmlns = “http://www.w3.org/2000/svg” xmlns: xlink = ‘http: //www.w3.org/1999/xlink’ ……… “);

-webkit-mask-image: url(“data: image / svg + xml,% 3C% 3Fxml version = ‘1.0’ encoding = ‘iso-8859-1’% 3F% 3E% 3Csvg class =” svg-img “version = ‘1.1’ id = ‘Capa_1’ xmlns = “http://www.w3.org/2000/svg” xmlns: xlink = ‘http: //www.w3.org/1999/xlink’ ……… “);

&:hover {
background-color: red;
}
}

It is possible without webkit-mask-imageif the compiler can add this attribute on its own.

If you need to center, then add:

mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *