Как быть, если в макете не хватает деталей?

Question

[Валерий]

Добрый день.

При наведении картинка должна меняться с серой на "красную". С кружком снизу и надписью проблем нет, а как быть с картинкой? Пробовал из PNG экспорт в SVG. Получается код в base64 как я понимаю, и управлять им нельзя, т.е цвет не изменить. Пробовал замену цвета в ФШ, из HEX в RGB перевёл, но ФШ выдаёт на эти значения совсем другой цвет. Крутить ползунки выбора цвета руками, такое себе, точности не добился.
Может я упускаю какой-то совсем простой вариант?
Макет никто не допилит, т.к. он взят с просторов для тренировки.

Comments

[Анита Ковалева]

Может не правильно перевели из png? Обычные генераторы вам вряд ли помогут, в своё время использовала Inscape для этого. Плюс для того что бы ваша анимация отрабатывала нужно инлайново вставлять полученный вами svg. Svg вставленная как обычный img или background'ом - не анимируется.

[#FFFFFF]

да, вам нужны эти иконки в svg, чтобы можно было бы программно задать цвет по наведению. Делать иконки в пнг, да еще и дублировать в разных цветах - уровень вёрстки 5-летней давности как минимум. Если иконки нарисованы векторно, экпортируйте их в формат svg, если растрово - рекомендую найти подобные иконки самостоятельно на сервисах типа flaticon.com. Затем вставьте инлайново или спрайтом

[Валерий]

Анита Ковалева, экспортировал из авокода, из ФШ, и онлайн редакторами пользовался, результат один - мета теги собственно сам svg вот в таком виде (здесь часть ссылки)
xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAXCAQAAACyw+fcAAAABGdBTUEAA...
А может я зря пытаюсь увидеть там теги типа fill?
Inscape мне попался в процессе поисков, но не стал его юзать, подумал что будет такой же результат.
Спасибо за наводку, инлайново не делал.

[Анита Ковалева]

Валерий, Не правильно делаете, avocode неадекватно экпортирует svg. Единственный вариант экспорта - заходите в фотошоп и если иконка векторная - то нажатием правой кнопки по ней и экспорт, если это растр - то нужно будет его перегонять в кривые программой inscape. В крайнем случае - найти похожие иконки svg на сайтах с паками, и так же добавить инлайново - или в спрайт.

Answer 1

[Алекс Глебов]

Обычно дергают диза
Но можно тут найти похожие иконки
https://www.flaticon.com/

Answer 2

[WhiteBearDev]

Если Вы используете PNG, то открывайте в ФШ, серую иконку и "Наложением цвета" заливайте в нужный Вам цвет. Полученное изображение, можно залить спрайтом с серой иконкой

Answer 3

[Vadim Bogomazov]

Гугл -> free icons -> flaticon.com -> вбиваешь поочередно "list", "power", "chart" -> берешь похожее.