ben-eb/gulp-svgmin

Trouble with linearGradient in Mozilla

Muskos opened this issue · 2 comments

Muskos commented

Maybe it's not a problem with gulp-svgmin. I created svg sprite:

var gulp = require('gulp'),
    svgstore = require('gulp-svgstore'),
    svgmin = require('gulp-svgmin'),
    path = require('path'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber');

gulp.task('schedule_svg', function(){
    return gulp
        .src('/img/schedule_svg/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore({
            inlineSvg: true,
        }))
        .pipe(plumber())
        .pipe(rename('_schedule.svg'))
        .pipe(gulp.dest('../www/dist/img/svg'));
});

Insert file on page:
<?php echo file_get_contents("dist/img/svg/_schedule.svg");?>
Add svg element:
<svg class="icon icon-logo" fill="currentcolor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_RF_02"></use></svg>
In chrome i see logo. But in Mozilla logo without gradient.
Link to codepen with generated svg : http://codepen.io/Muskos/pen/dpjvvj

Can you help me with this?

ben-eb commented

This module is only a thin wrapper of svgo, any problems with the output should be directed to their tracker. https://github.com/svg/svgo/issues