Как изменить цвет svg иконки

Question

Подскажите как изменить цвет svg иконки? Код получен из photoshop c помощью плагина. Добавление атрибута style="fill: #000;" тегу image не помогает.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="7" viewBox="0 0 11 7">
    <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
    <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
    </rdf:RDF>
    </x:xmpmeta>                          
    <?xpacket end="w"?></metadata>
    <image id="Векторный_смарт-объект" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
    </svg>

Спасибо огромное, я "весь" интернет перекопал в поисках решения — Kirill Donenko, Dec 17 '17 at 11:06

Alexandr_TT · Accepted Answer · 2017-12-17T14:35:18.627

Иконка сделана в растровом редакторе, скорее всего в плагине Фотошопа, а затем сохранена в формате data:image/png;base64. Иконка на самом деле осталась растровой, обернутой в SVG оболочку, поэтому через CSS ей невозможно поменять стили привычными методами.

Вот так иконка выглядит при десятикратном увеличении. На мой взгляд совсем не отличается от растра. Такие простые изображения лучше делать в векторных редакторах, в Inkscape например. Он бесплатен, но достаточно богат по реализованным функциям и одновременно прост, и интуитивно понятен в изучении.

Но, что есть, то есть. И в случае формата изображения base64 есть способы стилизации:

Применяя фильтры

Используя <feColorMatrix можно покрасить иконку в любой цвет.

<pre>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="7" viewBox="0 0 11 7">
<defs> 
 <filter id="RedFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter>
<image id="Vector_Smart_Object" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
</defs>
<use xlink:href="#Vector_Smart_Object" filter="url(#RedFilter)" ></use>
</svg>
</pre>

И даже изменять цвет при наведении курсора:

<style>
#VSO:hover {
filter:url(#GreenFilter);
}
</style>
<pre>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="14" viewBox="0 0 11 7">
<defs>
<filter id="WhiteFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter> 
 <filter id="GreenFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter>
<image id="Vector_Smart_Object" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
</defs>
<use id="VSO" xlink:href="#Vector_Smart_Object"   ></use>
</svg>
</pre>

Как изменить цвет svg иконки

1 Answers1

Linked