Раскрашивание SVG в фоновых изображениях CSS

Я иногда перевожу и выкладываю на сайте старенькие статьи, когда их содержимое до сих пор актуально и мало информации по этому вопросу в российском инете. Данная статья как раз этот случай.

Автор статьи Ноа Блон - веб-разработчик.

Мне нравится использовать SVG в качестве фоновых изображений в CSS, но плохо то, что вы не можете легко изменить fill цвет в CSS. Вот несколько способов обойти эту проблему.

SVG в фоновых изображениях CSS

Использование SVG в качестве фона в CSS позволяет использовать мощные свойства CSS для определения размера и положения фона. Это значительно упрощает определение размера SVG, поскольку изображение легко масштабируется до размера вашего элемента. Кроме того, SVG не загромождает разметку.

У встроенного SVG есть и другие преимущества. SVG в фоновом изображении можно кэшировать. Использование спрайтов изображений и встраивание SVG в виде URI данных также может повысить производительность.

CSS-маски

Это мой любимый метод, но ваш браузер должен поддерживать его. С помощью свойства mask вы создаёте маску, которая применяется к элементу. Там, где маска непрозрачна или сплошна, базовое изображение видно. Там, где она прозрачна, базовое изображение маскируется или скрывается. Синтаксис CSS mask-image похож на background-image.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Здесь я устанавливаю SVG в качестве маски.fill значка в SVG не имеет значения, потому что он маскирует фоновый слой красного цвета. Поэтому в результате получается красный значок. Для webkit я использую префикс.

Вашим фоном может быть цвет, изображение, градиент - что угодно.

Существует множество свойств, связанных с маской, таких как mask-position, mask-repeat, и mask-size, которые соответствуют свойствам CSS background: Вы можете использовать сокращение mask так же, как сокращение background:

.icon {
    background-color: red;
    -webkit-mask:  url(icon.svg) no-repeat 50% 50%;
    mask: url(icon.svg) no-repeat 50% 50%;
}

Маски поддерживаются в большинстве браузеров. Команда разработчиков IE рассматривает возможность поддержки CSS-масок. Firefox в настоящее время не поддерживает внешние SVG-маски.

CSS-фильтры

Вы можете применять к элементам DOM эффекты, подобные Photoshop, с помощью CSS-фильтров. Фильтры можно объединять в цепочки, и каждый фильтр будет воздействовать на результат предыдущего.

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewbox="0 0 24 24">
    <path fill="red" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
</svg>

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

В этом примере значок имеет чисто красный fill цвет в SVG. Фильтр hue-rotate поворачивает оттенок на 220 градусов вокруг цветового круга RGB. В результате значок становится синим. Алгоритм поворота оттенка не очень точный, поэтому, хотя результат должен быть чисто синим, он немного отличается. Один из способов исправить это и повысить насыщенность цвета — добавить saturation фильтр. В этом примере я добавил в цепочку произвольно большое значение пять, что увеличивает насыщенность на 500%.

Объединив фильтры в цепочку, вы можете создать множество цветных иконок на основе одной цветной иконки. С помощью различных комбинаций фильтров hue-rotateinvert, brightness и saturation я создал радужный спектр ROYGBIV и некоторые другие базовые цвета, такие как голубой и пурпурный.

Создать набор фильтров в оттенках серого довольно просто. Вы добавляете grayscale фильтр и настраиваете brightness фильтр в соответствии с нужным количеством оттенков серого.

Эта техника не очень интуитивно понятна. Возможно, вам придётся методом проб и ошибок найти нужные цвета, особенно учитывая, что алгоритмы неидеальны. В будущем было бы здорово, если бы фильтры CSS также работали в пространстве HSL, так как это было бы гораздо понятнее.

Фильтры CSS хорошо поддерживаются в большинстве браузеров. В IE они указаны как «в разработке», что означает, что они активно разрабатываются и скоро будут добавлены в IE.

URI данных

При правильном форматировании вы можете добавить SVG XML прямо в свой CSS. Используя этот метод и немного магии Sass, я создал несколько 

функций, которые позволяют динамически изменять цвет.

При такой настройке добавьте координаты пути вашего SVG в карту Sass с помощью ключа и вызовите функцию с вашими параметрами. Вы вызываете функцию с именем значка, которое соответствует ключу в карте. Вы можете передавать аргументы для color, stroke-color, и stroke-width. Вы также можете делать другие интересные вещи, например передавать любой допустимый для SVG CSS, как я сделал с stroke-dasharray в последнем примере.

При правильной кодировке URL это будет работать в IE. Очевидно, что это довольно сложно сделать правильно.

SVG Background Sprite

При создании спрайтов для SVG используются те же принципы, что и при создании обычных спрайтов. Спрайт содержит все версии изображения. Управляя background-size и background-position в CSS, вы выбираете, какую версию отображать. Вот как можно создать спрайт SVG:

Используйте атрибут пространства имён xmnls, иначе SVG не будет работать на вашем фоне. Также добавьте атрибут xmlns:xlink, если используете ссылки, которые я использую в тегах use. Тег width и height должны быть достаточно большими, чтобы вместить все изображения. В этом примере я использую 24 иконки размером 24x24, расположенные вертикально, поэтому размеры моего SVG составляют 24x576 (24 умножить на 24 = 576).

Я использую теги symbol и use для уменьшения размера файла. Определите форму значка как symbol и поместите его в блок defs. Присвойте ему id. Используйте тег use для создания версий этого символа. В теге use координата y настраивается таким образом, чтобы значки накладывались друг на друга с шагом в 24 единицы. Атрибут fill окрашивает значок. Вот демонстрация с набором разноцветных значков, созданных с помощью этой техники.

Я использую Sass здесь, чтобы упростить позиционирование фона.

Этот метод отлично работает везде, где поддерживается SVG. Поскольку вам нужно вручную создавать и добавлять новые версии иконок в спрайт, он довольно негибкий.

Это те методы, которые я смог придумать для раскрашивания SVG в качестве фонового изображения с помощью CSS. Есть ли другие? Возможно!