Не получается поменять fill в svg иконке. В чем ошибка?

Question

[Shirokuiu]

1. Есть спрайт svg, который был прогнан через - gulp-svgstore и gulp-svgmin. На выходе получил :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="logo" viewBox="0 0 43 47"><image width="43" height="47" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAvCAMAAABNEsPkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAANlBMVEUAAACkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjkAAACTXjzEAAAAEHRSTlMAIN9An4AQYK/vj3DPv1AwJxVnQAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhBwQNGy3Ivy18AAAA80lEQVRIx+3V0RaCIAwG4AFjOAz0/Z82BoqdgDjHbv0v0sGXEgoBHFEa6qkxRtVKX6c1aOWT3MK7hBdH0mCxpUDpAuQLLGGkdDvqWFiX9VNmndqgm2+ZdZ966UOs7GXly75HjfSH9BtPSxDlYDpWS4cm0qeNYHNTS+M+Smynd2jbCQ5DGxq7jwP/xIxzbwzKrmpq1WoTcvLQ48RGedquvDB6YnV5jc7ypz2Oj33sXZvXr5/YvH0FIGT203XhtWywd/aHjQeUt3bRb1i0DiVlD2Ts0DoMe1R2MIDHfgY7Fge2/L2cc7/lKg6sXIpdrRxfN8l5A2ocSPHUn5T/AAAAAElFTkSuQmCC"/></symbol></svg> и тд ....

2. Инлайнится на страничку svg спрайт с помощью js
3. Нужную иконку вызываю с помощью:

<svg class="logo__svg" width="147" height="40">
  <use xlink:href="#logo"></use>
</svg>

И все в порядке , иконка отображается.
Но как только я хочу ее перекрасить допустим в красный цвет:

.logo__svg {
    fill:  red;
  }

Она не перекрашивается. Буду очень признателен , если укажите на ошибку. Гуглил проблему , но результатов не нашел.

P.S. Сохранял svg иконки из фотошопа методом - export as.

Answer 1

[Дима Паутов]

У image в спрайте нельзя менять цвет. Это тоже самое растровое изображение, только обёрнутое в svg. Менять цвет можно только у векторных элементов. Таких как path, g, circle и т.д.

Comments

[Shirokuiu]

Получается , либо собирать спрайт не через gulp, либо экспортировать svg не из photoshop , а из illustrator? Так как отдельная svg иконка из фотошопа не имеет в своем коде path, g, circle и т.д.

[Дима Паутов]

Shirokuiu: Да. Фотошоп работает сохраняет только растровые изображения. Для работы с векторными вам нужно использовать illustrator. Но в любом случае, если вы вставите растровое изображение в илюстратор, оно останется растровым.

[Shirokuiu]

Дима Турков: Спасибо!