Изменение цвета спрайта SVG с фоновыми данными

Question

Я пытаюсь создать гибкое решение спрайтов для своего сайта, благодаря чему у меня может быть одна версия каждого значка в изображении спрайта, но у меня есть возможность изменять цвет его динамически , Я знаю, что вы можете это сделать, если вы вставляете SVG на свою страницу, но я не хочу этого делать, поскольку я буду использовать его в качестве фонового изображения в css/sass. Я просмотрел следующую статью, которая выглядит многообещающей и работает так, как описано в Chrome, но также посмотрела на caniuse.com (http://caniuse.com/#search=URI). Я также понял, что IE поддерживает только данные изображения base64. Это не позволяет мне изменять цвета заливки путей в моих данных SVG.

Modify SVG fill color when being served as Background-Image

Я использую глотка с моим проектом, и мой вопрос, я был бы в состоянии преобразовать что-то вроде этого, который будет в моей дерзости файле:

background:url('data:image/svg+xml;utf8,<svg> ... </svg>'); 

в версии base64, как так с глотком?

background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uP...'); 

Это позволило бы мне динамически менять цвета с помощью переменных и т. Д., Но также иметь поддержку IE.

Это похоже на возможность, но я не уверен, будет ли это работать, поскольку мое изображение - это данные для начала, тогда как в этом примере это URL-адрес iamge.

http://stefanimhoff.de/2014/gulp-tutorial-7-base64/

Answer 1

Найдено решение - https://www.npmjs.com/package/gulp-css-str2base64.

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