SVG иконки как backgound?
Ваше спасение - gulp-svg-sprite.
Умеет собирать спрайты в четырёх разных режимах, режим для css-background тоже есть. Генерирует стили с уже установленными координатами иконки в спрайте. Для интерактивного svg background не подходит.
Я пользуюсь режимом symbol, всё работает примерно так:В svg-иконке в качестве цвета необходимого атрибута пишем currentColor (fill="currentColor" или stroke="currentColor", смотря что нужно красить).Собираем спрайт, рендерим его на странице. Элементы symbol не отображаются до вызова.В элементе, где нужна иконка, используем <svg>
    <use style="color: rebeccapurple" xlink:href="id_элемента_спрайта"></use>
</svg>
Цвет из color наследуется внутри иконки везде, где используется currentColor. Можно развлекаться с CSS! (transition вам в помощь)
Минусы:Активно управлять можно только одним цветом.Это не background.
Мой gulp, там найдёте конфигурацию gulp-svg-sprite.Пример использования (иконки соцсетей в правом верхнем углу).
Только что решал эту задачу. Вернее, пытался решить - невозможно это сделать. Есть костыли с фильтрами и масками, но они не везде поддерживаются, не всегда применимы и вообще костыли (статья).
Единственный вариант - инлайнить svg в документ, но это тоже нетривиальная задача (SO-1, SO-2, SO-3).