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
orgulp-svgo
. It's a companion tool for it.
Usage
var gulp = svgo = xmlEdit = ; gulp;
Options
Its takes two optional arguments:
;
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:
{ 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