# gulp-edit-xml

> Gulp plugin for editing xml files

Latest version **3.2.0** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-edit-xml
pnpm add gulp-edit-xml
yarn add gulp-edit-xml
bun add gulp-edit-xml
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.0 |
| Published | 2023-04-12 |
| First published | 2014-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Vivek Kumar Bansal |
| Maintainers | vkbansal |
| Keywords | gulp, plugin, gulpplugin, xml, svg |

## Links

- npm: https://www.npmjs.com/package/gulp-edit-xml
- Repository: https://github.com/vkbansal/gulp-edit-xml
- Issues: https://github.com/vkbansal/gulp-edit-xml/issues
- npm.io page: https://npm.io/package/gulp-edit-xml

## Dependencies (6)

- [xml2js](https://npm.io/package/xml2js.md) ^0.5.0
- [plugin-error](https://npm.io/package/plugin-error.md) ^2.0.1
- [@types/xml2js](https://npm.io/package/@types/xml2js.md) ^0.4.11
- [lodash.isobject](https://npm.io/package/lodash.isobject.md) ^3.0.2
- [lodash.isfunction](https://npm.io/package/lodash.isfunction.md) ^3.0.9
- [lodash.defaultsdeep](https://npm.io/package/lodash.defaultsdeep.md) ^4.6.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 3.2.0 (latest) — 2023-04-12
- 3.1.1 — 2019-11-22
- 3.1.0 — 2019-11-21
- 3.0.0 — 2018-01-10
- 2.0.0 — 2015-09-06
- 1.1.0 — 2015-05-12
- 1.0.1 — 2014-11-25

## README

[![NPM version](https://badge.fury.io/js/gulp-edit-xml.svg)](http://badge.fury.io/js/gulp-edit-xml)
[![Build Status](https://github.com/vkbansal/gulp-edit-xml/workflows/master/badge.svg)](https://travis-ci.org/vkbansal/gulp-edit-xml)
[![Dependencies](https://david-dm.org/vkbansal/gulp-edit-xml.png)](https://david-dm.org/vkbansal/gulp-edit-xml)
[![devDependency Status](https://david-dm.org/vkbansal/gulp-edit-xml/dev-status.svg)](https://david-dm.org/vkbansal/gulp-edit-xml#info=devDependencies)

# gulp-edit-xml

A gulp plugin for editing xml files, specially svg files. It makes use of [xml2js](https://www.npmjs.org/package/xml2js). It helps in further manual optimization of a svg file even after using [svgo](https://www.npmjs.org/package/svgo).

## Install

```bash
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](https://www.npmjs.org/package/xml2js) to do the task for me. You can have a look at it [here](https://gist.github.com/vkbansal/1d2321e34feba9648589).

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

```js
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:

```js
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:

```js
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](https://github.com/Leonidas-from-XIV/node-xml2js#options)

default:

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

### License

[MIT](LICENSE.md)

---
_Source: https://npm.io/package/gulp-edit-xml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._