Почему вставка svg через data:image не работает в Mozille?

Question

[Murat Atila]

Всем привет!
Вопрос следующий, имеется функция в less где background-image задаётся через url('data:image.....')
ссылка
В браузерах на движке webkit, такая штука работает, но в ие и мозилле, изображение не может загрузиться.

Как сделать кроссбраузерное решение?
Спасибо за Ваши ответы!

Answer 1

[kirick]

У меня недавно была такая же проблема, но я работаю через Стайлус.
Решение вкупе с Галпом оказалось очень простым — в таске Галпа была описана глобальная функция base64(), которую я вызывал из Стайлуса. А вот о том, как добавить свои функции в компилятор Лесс: stackoverflow.com/a/26224903

Вот примерный Стайлус:

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

А вот таск в Галпе с дефайном глобальной функции, которая возвращает в компилятор Стайлуса base64 от текста:

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'));
});

Comments

[Roman]

а есть ли решение, где нет необходимости указывать сам код svg? простым решением видится использование конструкции вида background-image url('icon.svg') которое конвертировалось бы само в svg и в дальнейшее преобразование через base64 ^^

[kirick]

Roman: Решение очевидно — если в препроцессоре есть функция, позволяющая получить контент файла по его пути, то вызываем её вместо написания СВГ. Если такой функции нет — создаём её в таске Галпа.
Для Стайлуса будет что-то вроде
'fileContent': function(input){ return require('fs').readFileSync(input.val).toString(); }