How to properly fill SVG in CSS?

Question

css

Good evening everyone. Attached SVG via background:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_1' x='0px' y='0px' viewBox='0 0 477.175 477.175' enable-background='new 0 0 477.175 477.175'%3E%3Cg%3E%3Cpath class='moresvg' fill='%23696969' d='M360.7 229L135.7 4c-5.4-5.3-14-5.3-19.2 0s-5.3 13.8 0 19L332 238.7 116.5 454c-5.3 5.4-5.3 14 0 19.2 2.6 2.6 6 4 9.5 4 3.4 0 7-1.3 9.5-4l225-225c5.4-5.3 5.4-14 .2-19z'/%3E%3C/g%3E%3C/svg%3E");

In a similar way. fill is not applied. I need to change the fill on hover.

Answer 1

Should be included in html.
fill applies to selectors. If you wrote the picture "inline" in css, then there are no selectors to which fill could be applied.

Answer 2

Only if using https://github.com/TrySound/postcss-inline-svg

Answer 3

Recently encountered. Here, either insert into html, or inline through js / jQuery . I see, the link has already been thrown above) Only fill most likely should be applied not to the svg itself, but to the svg pass (it is advisable to write classes for pass in the svg code)