Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-edit-xml with all npm packages installed. Try it out:

var gulpEditXml = require("gulp-edit-xml")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-edit-xml v3.1.1

Gulp plugin for editing xml files

NPM version Build Status Dependencies devDependency Status


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.


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.


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

gulp.task('svg', function() {
      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(' ');
   = parseInt( + parseInt(transforms[0]);
   = Math.round( * 10) / 10;
            if (transforms.length == 2) {
     = parseInt( + parseInt(transforms[1]);
     = Math.round( * 10) / 10;
            delete cn.transform;
            delete cn.fill;
          nodes[i].$ = cn;
        xml.svg.g[0].circle = nodes;
        return xml;


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.


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


    parserOptions: {},
    builderOptions: {
            pretty: false



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free