глоток imagemin нарушения SVG маски

У меня есть файл SVG, как это:глоток imagemin нарушения SVG маски

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient gradientUnits="objectBoundingBox" id="gradient" x2="0" y2="1"> 
     <stop stop-offset="0" stop-color="transparent" /> 
     <stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/> 
    </linearGradient> 
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> 
     <rect width="1" height="1" fill="url(#gradient)"/> 
    </mask> 
    </defs> 
</svg>

Я использую Глоток-imagemin сжать все мои изображения, включая SVGs. Конкретная задача выглядит так:

gulp.task('images', function() { 
    return gulp.src('/src/img/**/*.*') 
    .pipe(imagemin().on('error', gutil.log)) 
    .pipe(gulp.dest('/dist/img')); 
});

Отлично подходит для большинства моих изображений. Однако для SVG файл выше, выход:

<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="objectBoundingBox" id="a" x2="0" y2="1"><stop stop-color="transparent"/><stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/></linearGradient></defs></svg>

Обратите внимание на mask была удалена (что очень важно) и идентификатор изменен. Есть ли способ остановить это, или даже отключить сжатие SVG с помощью этого плагина? Я просмотрел документацию и не вижу пути.

источник

2016-08-02 Coop

@RobertLongson Нет, не думаю, что у меня есть что-то полезное. Я боюсь – Coop

Как насчет этого? http://stackoverflow.com/questions/38023039/using-gulp-to-create-an-svg-sprite-without-compression/38036872#38036872 –

Следующие работал для меня:

gulp.task('images', function() { 
    return gulp.src('src/img/**/*.*') 
    .pipe(imagemin([ 
    imagemin.svgo({ 
     plugins: [ 
     { removeUselessDefs: false }, 
     { cleanupIDs: false} 
     ] 
    }), 
    imagemin.gifsicle(), 
    imagemin.jpegtran(), 
    imagemin.optipng() 
    ]).on('error', gutil.log)) 
    .pipe(gulp.dest('dist/img')); 
});

Это было в результате SVG, что она производила:

<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="objectBoundingBox" id="gradient" x2="0" y2="1"><stop stop-color="transparent"/><stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/></linearGradient><mask id="mask" maskContentUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"><path fill="url(#gradient)" d="M0 0h1v1H0z"/></mask></defs></svg>

Я в основном только инвалидов два варианта для imagemin.svgo() плагина:

Отключение removeUselessDefs сохранено <mask>
Отключение cleanupIDs сохраняется id атрибуты

Если по каким-то причинам это не работает для вас, или есть другие оптимизации, которые вызывают вас проблемы, есть a whole list of options, которые можно включить и отключить. Просто попробуйте их, пока не найдете те, которые соответствуют вашему варианту использования.

Если все остальное не удается, просто удалите весь вызов imagemin.svgo() из массива, который передается в imagemin(). Таким образом, только .gif, .jpg и .png файлы будут сведены к минимуму.

источник

2016-08-02 17:34:32

Точно, что я был после! благодаря – Coop

глоток imagemin нарушения SVG маски

ответ

Смежные вопросы