gulp-edit-xml
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.1 • Public • Published

    NPM version Build Status Dependencies devDependency Status

    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

    Install

    npm i gulp-edit-xml

    DownloadsWeekly Downloads

    525

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • vkbansal