У меня есть код:
<div class="service">
<img src="../img/write.svg">
</div>
и есть файл write.svg с содержимым:
<?xml version="1.0" encoding="UTF-8"?> <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 50 50.5" style="enable-background:new 0 0 50 50.5;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} </style> <g> <path class="st0" d="M44.4,48.1l-7.7-7.7V30.3L16.2,9.7l-0.1-0.1c-2-1.6-6.7-3.5-10.6,0.4C0.7,14.8,3,19.9,4.3,21.4 c1.1,1.4,19.6,19.9,20.3,20.7l0.3,0.3l10.4-0.5l6.3,6.2h-9.2v2h15v-2H44.4z M34.7,38.5l-4.9-4.8v-7.4l4.9,4.9V38.5z M13.8,28.4h7.8 l5.1,5h-7.9C17.1,31.7,15.4,30,13.8,28.4z M19.6,26.4h-7.8c-2-2.1-3.8-3.8-4.9-5h7.6L19.6,26.4z M22.8,26.7v-7.5l5,5v7.5L22.8,26.7 z M20.8,17.2v7.5l-5-4.9v-7.6L20.8,17.2z M6.9,11.4c1.3-1.3,2.6-1.7,3.8-1.7c1.2,0,2.3,0.4,3.1,0.8v7.2l-4.5-4.5l-1.4,1.4l4.7,4.7 H5.3C4.6,18,3.6,14.8,6.9,11.4z M25.7,40.4c-1.3-1.3-3-3.1-5-5h8l4.6,4.6L25.7,40.4z"></path> <rect x="25" y="48.1" class="st0" width="5" height="2"></rect> <rect x="17.5" y="48.1" class="st0" width="5" height="2"></rect> <rect x="10" y="48.1" class="st0" width="5" height="2"></rect> <rect x="2.6" y="48.1" class="st0" width="5" height="2"></rect> </g> </svg>
Это иконка белого цвета. Я знаю, что можно заменить fill:#FFFFFF; на fill:currentColor; и тогда цвет иконки будет такой, как определено во внешнем css файле. Но на практике так и не смог изменить её цвет. Подскажите пожалуйста, как нужно изменить svg и css, чтобы цветом иконки можно было управлять из css и делать его разным в разных местах сайта?
img
то привычнее ;-)