Как изменить цвет заливки SVG-изображения при использовании его в качестве фонового изображения?

Вы можете использовать CSS-маски. С помощью свойства mask вы создаете маску, которая применяется к элементу.

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

Для получения дополнительной информации посмотрите эту отличную статью: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Один из способов решения этой проблемы заключается в том, чтобы обслуживать ваш SVG с помощью серверного механизма. Просто создайте ресурс на сервере, который будет выводить ваш SVG в зависимости от GET-параметров, и предоставьте его по определенному URL.

Затем вы просто используете этот URL в вашем CSS.

Важно отметить, что в качестве фонового изображения SVG не является частью DOM, и вы не можете его изменять.

Другой вариант – использовать его обычным образом, встраивая на страницу, но позиционировать абсолютно, делать его шириной и высотой на всю страницу, а затем использовать свойство z-index в CSS, чтобы разместить его за всеми другими элементами DOM на странице.

Ещё один подход заключается в использовании маски. Вы можете изменить цвет фона маскированного элемента, что даст тот же эффект, что и изменение атрибута fill в SVG.

Вот пример HTML-кода:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

А вот CSS:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

Более подробный туториал вы можете найти здесь: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (это не мой источник). В нем предлагается множество подходов (не ограничиваясь масками).

Чтобы создать любой цвет, используя фильтры, такие как sepia, hue-rotate, brightness и saturation, вы можете комбинировать их в CSS. Например, в вашем случае, чтобы получить розовый цвет, вы можете использовать следующий код:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

Здесь мы уменьшаем яркость с помощью brightness(0.5), применяем сепию sepia(1), затем вращаем оттенок hue-rotate(-70deg) и, наконец, увеличиваем насыщенность с помощью saturate(5). Эти комбинации позволяют точно настроить цвет, который вы хотите получить.

Если вам нужно получить другие цвета, вы можете изменять параметры hue-rotate, brightness, saturate и даже добавлять другие фильтры, чтобы достичь нужного результата. Для более подробной информации о работе с цветами и фильтрами в CSS, вы можете обратиться к CSS-Tricks.

Да, это возможно с помощью Sass! Всё, что вам нужно сделать — это закодировать ваш SVG-код с помощью URL-кодирования. Это можно сделать с помощью вспомогательной функции в Sass. Я подготовил пример на CodePen, который вы можете посмотреть здесь:

http://codepen.io/philippkuehn/pen/zGEjxB

// выбираем цвет
$icon-color: #F84830;

// функции для URL-кодирования строки SVG

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}

// стили иконки
// обратите внимание на fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

Таким образом, вы сможете использовать SVG-иконки как фоновое изображение с необходимыми стилями в Sass!