Why doesn't pasting svg via data:image work in Mozille?

Question

css

Hello!
The question is, there is a function in less where background-image is set via url('data:image.....')
link
In browsers based on the webkit engine, this thing works, but in io and mozilla, the image cannot load.
How to make a cross browser solution?
Thank you for your responses!

Answer 1

I recently had the same problem, but I work through Stylus.
The solution, coupled with Galp, turned out to be very simple - in the Galp task, the base64 () global function was described, which I called from Stylus. And here's how to add your functions to the Less compiler: stackoverflow.com/a/26224903
Here's an example Stylus:

.element
  background-image unquote("url(data:image/svg+xml;base64," + base64("<svg></svg>") + ")"

And here is the task in Galpa with the global function defined, which returns base64 from the text to the Stylus compiler:

gulp.task('stylus', function(){
  gulp.src([ './css/*.styl', '!./css/_*.styl' ])
  .pipe(stylus({
    define: {
      'base64': function(input){
        return (new Buffer(input.val)).toString('base64');
      }
    }
  }))
  .on('error', console.log)
  .pipe(gulp.dest('./build/css'));
});