Всем привет. Это статья из разряда: “Решаем простые задачи сложным способом”, или “Для тех, кто не ищет легких путей”. Хотел бы уточнить заранее, что это не “Самое лучшее решение проблемы”, а всего лишь то, до чего я смог дойти исходя из собственного опыта. Поискав в интернете способы использования SVG и их изменения при помощи CSS переменных, вы точно наткнетесь на множество решений, но здесь хочу описать проблему, с которой столкнулся я. Задача в том, что необходимо добавлять на страницу SVG элементы при помощи CSS свойства background и менять их при помощи переменных CSS. Поехали!
Разбираемся что есть что:
Для начала хорошо было бы понять, что такое SVG и CSS variables:
SVG или Scalable Vector Graphics — язык разметки масштабируемой векторной графики, наиболее часто используемый для отображения иконок или небольших изображений на странице. Его прелесть в том, что по сути это набор координат, которые могут изменять размеры, не теряя четкости отображения.
CSS variables или пользовательские свойства — это объекты, содержащие конкретные значения, которые можно повторно использовать в документе. Отличный способ упрощения написания свойств для повторяющихся элементов в коде и да, их можно писать прямо в CSS без препроцессоров. Это ли не чудо!?
Задача и способы ее решения:
Вернемся к теме этой статьи. Есть задача: разместить все SVG иконки на странице в CSS и использовать их в дальнейшем как классы к блокам, а цвета для них задать через CSS переменные.
На мой взгляд, есть несколько способов реализации этой задачи:
- Использовать иконочные шрифты и задать SVG иконки через них;
- Добавить изображения, используя популярное CSS свойство background;
- Отказаться от добавления иконок в CSS и разместить их прямо внутри HTML код страницы;
Каждый из выбранных подходов так или иначе имеет возможность работы с CSS переменными. Для шрифтов и SVG, вставленных прямо в HTML, добавить переменные в значение цвета не вызовет сложности, но при использовании иконок, вставленных через background, возникают проблемы. В свойстве background, SVG имеет вид строки добавленной через URL и все, что внутри него не проходит обработку, а только отображается “напрямую”. К примеру, можно добавить значение цвета в виде HEX к атрибуту Fill и этот способ будет работать, но если прописать это же значение, используя CSS переменные — их значение не будет применено. Именно на решении этой проблемы я бы хотел остановиться.
Добавление SVG, используя Background:
Добавить SVG, используя свойство background очень просто. Пример подобного решения можно посмотреть тут:
При использовании этого подхода необходимо обратить внимание на:
- Кавычки внутри тега background-image и кавычки внутри SVG должны отличаться.
- Для добавления цвета лучше использовать значения в RGB(A), HSL(A) или названия цвета (например: red). Если нужно использовать цвет в HEX, то необходимо заменить # на %23, так как хеш-символ в URL-адресе зарезервирован для обозначения начала идентификатора фрагмента.
- Можно добавить стили для самой SVG в атрибуту styles.
Явным плюсом этого подхода, на мой взгляд, является то, что можно продолжить изменять background так как захочется — даже добавить анимацию.
Использование CSS переменных для SVG:
Добавление CSS переменных сводится к двум простым шагам — объявить ее и применить в нужном месте. В примере выше это выглядит так:
Здесь видно, что значения внутри переменных применяются для свойства background-color, но игнорируются для атрибута fill. Использование атрибута style внутри SVG также не принесет результатов.
Свойство mask-image, как решение проблемы:
Для того, чтобы продолжить использовать CSS переменные можно воспользоваться достаточно новым свойством — mask. Это CSS-свойство скрывает элемент (частично или полностью), маскируя или обрезая изображение в определенных точках, а это именно то, что нам нужно. Цвет для этого свойства определяется отдельно при помощи дополнительного свойства background-color, куда можно передать любой цвет, в том числе определенный при помощи переменной. Пример с использованием той же SVG:
При этом остаются все возможности, что были при использовании свойства background. Обратите внимание, что свойства атрибута Fill не учитываются при применении цвета заливки.
К сожалению, у этого свойства плохая поддержка браузеров Internet Explorer всех версий. Если вам необходимо поддерживать браузеры Internet Explorer, то лучше отказаться от этого способа в сторону добавления SVG инлайн и применения для него переменных.
Также для применения этого свойства в Chrome необходимо добавить префиксы.
Еще одним минусом этого подхода будет то, что он применим к одноцветным иконкам, по причине того, что используется свойство изменения фона.
Заключение:
В заключении хотелось бы сказать, что подобное использование SVG иконок вполне может пригодиться для изменения цветовых схем страниц, или в более сложных обстоятельствах. Скорее всего, это не единственный способ решения проблемы и есть более совершенные. Делитесь ими в комментариях. Всем добра и чуть чуть Mad.
Ранее статья была опубликована тут.