Question

我有多个SVG图标，以下是需要清理的其中一个图标的示例。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144" xml:space="preserve">
<rect x="32" y="32" fill-rule="evenodd" clip-rule="evenodd" width="80" height="80"/>
</svg>

我想保留<svg>并删除其余代码。我想删除这段代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

除了这个我什么都没做：

gulp.task('buildSvgIcon', function() {
  return gulp.src([ paths.svgIcons + '*.svg'])
    .pipe(gulp.dest('./www/assets/cleaned-up-svg-icons/'));
});

Answer 1

有一个很棒的Node.js模块用于优化名为SVGO的SVG文件，它有一个相应的Gulp插件，可预测为gulp-svgo。我没有使用后者，但我使用了前者（使用Webpack）并推荐它。

看起来您想要的选项（根据SVGO README）removeXMLProcInst，removeComments和removeDoctype。所有这些都是默认启用的，所以这应该是你所需要的：

$ npm install --save-dev gulp-svgo

...然后：

var gulp = require('gulp');
var svgo = require('gulp-svgo');

gulp.task('default', function() {
  gulp.src('src/img/*')
    .pipe(svgo())
    .pipe(gulp.dest('dest/img'));
});

如果只想要使用这三种优化，而不是其他默认优化，那么你会这样做（我认为）：

gulp.src('src/img/*')
  .pipe(svgo({
    removeXMLProcInst: true,
    removeComments: true,
    removeDoctype: true
  }))
  .pipe(gulp.dest('dest/img'));

GULP：在SVG中清除不需要的标记

1 个答案: