0

I'm trying to create a flexible sprite solution for my website whereby I can have one version of each icon within the sprite image but have the ability to change it';s colour dynamically. I know you can do this if you embed the SVG into your page but I don't want to do this as I will be using it as a background-image in css/sass. I have looked at the following article which looks promising and have it working as described in Chrome but having also looked at caniuse.com (http://caniuse.com/#search=URI) I have also realised that IE only support base64 image data. This prevents me from changing the fill colours of the paths in my SVG data.

Modify SVG fill color when being served as Background-Image

I am using gulp with my project and my question is, would I be able to convert something like this which will be in my sass file:

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

into a base64 version like so with gulp?

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

This would enable me to change the colours dynamically with variables etc in my sass but also have IE support.

This looked like it might be a possibility but I'm not sure if it would work as my image is data to begin with whereas in the example, it's an iamge URL.

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

Community
  • 1
  • 1
andyfurniss
  • 283
  • 1
  • 3
  • 12

1 Answers1

0

Found a solution - https://www.npmjs.com/package/gulp-css-str2base64.

This allows me to wrap my SVG data string in the str2base64 function which then converts it. I run this task after my sass task to ensure the variables have been applied before the data is encoded.

andyfurniss
  • 283
  • 1
  • 3
  • 12