Good day to all! I decided to try using svg-files in the layout, but I ran into a problem - the fill color is not specified. I try to register through fill, but in vain. Here is the css code

.icon { background: url("img/icons/book.svg"); background-size: 15px 16px; width: 15px; height: 16px; fill: #ffb600; }

here is svg

 <svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32"><path d="M14 5h2v20h-2zM16 32h-2c0-1.7-1.3-3-3-3h-11v-2h11c2.8 0 5 2.2 5 5zM16 32h-2c0-2.8 2.2-5 5-5h11v2h-11c-1.7 0-3 1.3-3 3zM12 25h-12v-25h11c2.8 0 5 2.2 5 5h-2c0-1.7-1.3-3-3-3h-9v21h10v2zM30 25h-12v-2h10v-21h-9c-1.7 0-3 1.3-3 3h-2c0-2.8 2.2-5 5-5h11v25z"/></svg>

As a result, the icon is filled with black, although in theory it should be yellow. Please help experienced. Thank!

    2 answers 2

    Here is a discussion of this problem in English: https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image

    In fact, the answer is: background-image is not part of the DOM, so you cannot manipulate it. Therefore, two solutions:

    Do not put svg on the background, but simply include in the document: http://jsfiddle.net/pn640zLt/

     <style> .icon { fill: #ffb600; } </style> <div class="icon"> <svg>...</svg> </div>

    Or, manipulate the contents of the actual SVG on the fly using JS, the examples above follow the link.

    • Thank you very much! - konstantin90

    The icon class must be set to path, a is not svg and everything will be.

     <path class="icon" d="M14 5h2v20h-2zM16 32h-2c0-1.7-1.3-3-3-3h-11v-2h11c2.8 0 5 2.2 5 5zM16 32h-2c0-2.8 2.2-5 5-5h11v2h-11c-1.7 0-3 1.3-3 3zM12 25h-12v-25h11c2.8 0 5 2.2 5 5h-2c0-1.7-1.3-3-3-3h-9v21h10v2zM30 25h-12v-2h10v-21h-9c-1.7 0-3 1.3-3 3h-2c0-2.8 2.2-5 5-5h11v25z"/></path>