Добавить hover-эффект svg background

Демо: https://codepen.io/irinainina/full/gXpRZB/
Код: https://codepen.io/irinainina/pen/gXpRZB

Как изменить цвет svg-изображения при наведении, если svg добавлено в качестве фона через background-image.
Все известные мне источники утверждают, что это невозможно. Ни одного решения данного вопроса (а задают его достаточно часто, например: Как заменить заливку svg при hover?
SVG игнорирует hover, как его заставить работать?) найти не удалось.

Все предложенные решения Css SVG hover color ; How do I make an SVG image change color when hover предлагают или вставлять svg в html, что выглядит не очень хорошо с точки зрения понятности, читаемости, лаконичности html-кода, или использовать два svg с разным цветом для разных состояний элемента, но это лишние файлы и при наведении иконки меняются не мгновенно, может быть заметная задержка, когда изображение исчезает, а потом появляется другого цвета, а это, очевидно, не тот эффект, на который мы рассчитываем.

Тем не менее, решение есть. Простое. понятное, не сложное. Для этого используем фильтры
Для изменения цвета при наведении добавляем svg стиль

.test:hover {
    filter: hue-rotate(300deg);
    transition: 0.5s;
}

Чтобы рассчитать угол поворота можно использовать сайт http://garex.github.io/nodejs-colors-to-less-operations/
Указываем исходный цвет и цвет при наведении, нажимаем кнопку  Go, в колонке результатов получаем значение spin - угол поворота между двумя цветами.

Из побочных эффектов - эффект радуги при переходе от одного цвета к другому. По-моему, очень симпатично. Если этот эффект хочется уменьшить, можно искать более короткий путь между цветами, например, смещение на 300deg и -60deg дадут одинаковый результат (в цветовом круге, как и в любом другом, 360 градусов), но второй путь в пять раз короче и смещение будет менее заметным.