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.0.0

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:


transform: A function that can be used to do manual operations. It takes one argument: The xml as an object. Remember to return the object at end.


    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