Работа с svg. Инлайнить или нет? Как мёрджить svg вместе с эфектами из Photoshop?
Добрый день!
Столкнулся с очередной неопределённостью. Есть кнопка с иконкой, которая делает реверс цвета. Реализаций масса: псевдоэлементы, иконочные шрифты, спрайты, инлайн svg. Как вы решаете такие задачи, когда необходимо менять цвет декоративных элементов? Стали бы вы инлайнить, мелкие декоративные элементы?
При инлайне, столкнулся со следующей проблемой, значок поиска (лупа), как будто нарисован не качественно, когда я меняю её цвет при hover, через свойство fill, заметно, что круг немного расплывается в пикселях. При увеличение масштаба, таких проблем не замечаю. Что это? Как с этим бороться? Может прогнать через сервисы или закинуть обратно в иллюстратор?
Так же если инлайнить, то нормально ли в кнопку, декоративный svg элемент, позиционировать абсолютно? Не как псевдо элемент.
Пробую реализовать через псевдо элемент с заменой изображений через ховер. В вёрстке особо нет проблем, но из фотошопа не смог вытащить ховер версию, чистого svg. Скачиваю изображение из слоя, через экспорт содержимого. У svg пикчи в фотошопе есть эффекты, которые меняют цвет изображения для hover события... Как объединить эти эффекты с svg? Если я нажимаю, преобразовать в смарт объект, то получаю необходимое склеивание, но внутри получается base64... Мне это не очень нравится, так как в случае необходимости, не могу контролировать это состояние стандартным обращением к svg. Есть другие варианты? Вариант получить нормальный svg.
Спрайты и svg спрайты, насколько это актуально в 2021 году? В каких случаях вы применяете эту технологию, если необходимо отрисовать другое состояние элемента при возникновение события на нём?
Свойствоmask-image, применяете ли? Поддержка для ie 11 и ниже - нулевая.
Я использую либо символьные спрайты, либо инлайн.
Все иконки ручками корректирую в люстре. Привожу к единому вьюбоксу, центрирую и выравниваю по пикселям.
Спасибо!
Про спрайты, если честно, мало что знаю. Стоит изучить этот вопрос.
Если вкратце, в чём преимущество такого подхода? Это про удобство или про производительность?
MyQuestion, символьные спрайты - это практически тот же инлайн, только код иконок не дублируется в каждом месте вызова, а используется ссылка (xlink:href). Преимущество инлайна - полный контроль со стороны css.
Средний