gulp-edit-xml

gulp-edit-xml

A gulp plugin for editing xml files, specially svg files. It makes use of xml2js. It helps in further manual optimization of a svg file even after using svgo.

Install

npm install gulp-edit-xml

Why I made this

Recieved a ~400KB svg file from a client. After editing it in Inkscape and processing it with svgo, the file size was reduced to ~140KB. The file contained ~1600 circle elements which had transform and fill attributes on each of it.

Editing it manually would have been a tedious task, so I put a quick script using xml2js to do the task for me. You can have a look at it here.

After removing the transforms and updating the cx and cy values, the file size was reduced to ~94KB. After removing fill attributes also, the final size was ~74KB, That is 47% more than svgo alone.

So I made the script into a gulp plugin to integrate it in my build process.

Note: This is not a replacement for svgo or gulp-svgo. It's a companion tool for it.

Usage

var gulp = require('gulp'),
  svgo = require('gulp-svgo'),
  xmlEdit = require('gulp-edit-xml');

gulp.task('svg', function() {
  gulp
    .src('src/img/main.svg')
    .pipe(svgo())
    .pipe(
      xmlEdit(function(xml) {
        var nodes = xml.svg.g[0].circle;
        for (var i = 0, l = nodes.length; i < l; i++) {
          var cn = nodes[i].$;
          if (cn.hasOwnProperty('transform')) {
            var transforms = cn.transform.match(/translate\(([\d\s\-\.]+)\)/)[1];
            transforms = transforms.split(' ');
            cn.cx = parseInt(cn.cx) + parseInt(transforms[0]);
            cn.cx = Math.round(cn.cx * 10) / 10;
            if (transforms.length == 2) {
              cn.cy = parseInt(cn.cy) + parseInt(transforms[1]);
              cn.cy = Math.round(cn.cy * 10) / 10;
            }
            delete cn.transform;
            delete cn.fill;
          }
          nodes[i].$ = cn;
        }
        xml.svg.g[0].circle = nodes;
        return xml;
      })
    )
    .pipe(gulp.dest('dist/img/'));
});

Options

Its takes two optional arguments:

xmlEdit(transform, options, file);

transform: A function that can be used to do manual operations. It takes two arguments:

• The xml as an object.
• The original raw file

Remember to return the object at end.

default:

function(data, file){
    return data;
}

options: An object with parserOptions and builderOptions as keys. These options will be passed to xml2js' Parser and Builder classes respectively. See this for more information

default:

{
    parserOptions: {},
    builderOptions: {
        headless:true,
        renderOpts:{
            pretty: false
        }
    }
}

License

MIT