Работа с svg. Инлайнить или нет? Как мёрджить svg вместе с эфектами из Photoshop?

Добрый день!

Столкнулся с очередной неопределённостью. Есть кнопка с иконкой, которая делает реверс цвета. Реализаций масса: псевдоэлементы, иконочные шрифты, спрайты, инлайн svg. Как вы решаете такие задачи, когда необходимо менять цвет декоративных элементов? Стали бы вы инлайнить, мелкие декоративные элементы?

При инлайне, столкнулся со следующей проблемой, значок поиска (лупа), как будто нарисован не качественно, когда я меняю её цвет при hover, через свойство fill, заметно, что круг немного расплывается в пикселях. При увеличение масштаба, таких проблем не замечаю. Что это? Как с этим бороться? Может прогнать через сервисы или закинуть обратно в иллюстратор?
Так же если инлайнить, то нормально ли в кнопку, декоративный svg элемент, позиционировать абсолютно? Не как псевдо элемент.

Пробую реализовать через псевдо элемент с заменой изображений через ховер. В вёрстке особо нет проблем, но из фотошопа не смог вытащить ховер версию, чистого svg. Скачиваю изображение из слоя, через экспорт содержимого. У svg пикчи в фотошопе есть эффекты, которые меняют цвет изображения для hover события... Как объединить эти эффекты с svg? Если я нажимаю, преобразовать в смарт объект, то получаю необходимое склеивание, но внутри получается base64... Мне это не очень нравится, так как в случае необходимости, не могу контролировать это состояние стандартным обращением к svg. Есть другие варианты? Вариант получить нормальный svg.

Спрайты и svg спрайты, насколько это актуально в 2021 году? В каких случаях вы применяете эту технологию, если необходимо отрисовать другое состояние элемента при возникновение события на нём?

Свойство mask-image, применяете ли? Поддержка для ie 11 и ниже - нулевая.
  • Вопрос задан
  • 206 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Я использую либо символьные спрайты, либо инлайн.
Все иконки ручками корректирую в люстре. Привожу к единому вьюбоксу, центрирую и выравниваю по пикселям.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы