ben-eb / gulp-svgmin Goto Github PK

I'm using svgmin together with https://github.com/akoenig/imacss/, which is a plugin that generates inline css for my SVGs, but for it to work, the svg must be URI encoded..
SVGO has a --datauri argument, is there any way to call this within gulp?
Ty

Hi.
First of all forgive me my lack of knowledge about gulp - I'm new to it. I hope that reporting this issue is justified.
The problem relates to using svgmin and svg2png in chain, like so:

.pipe(svgmin([{removeViewBox: true}]))
.pipe(svg2png(2))

Naturally svg2png should receive the output of svgmin, but that's not the case.
If we try to debug the flow with tap after svgmin...

.pipe(tap(function (file,t) { console.log(file.path); }))

... it reports file path of source files. In that situation chained svg2png plugin reads from the source.
Different thing happens when we intersect the two with gulp.dest.
While this may look like a good workaround, it forces gulp to write optimized svg's before using another plugins, which obviously reduces our flexibility.
Is that the correct flow in gulp?

Allo, allo.

svgo 0.5.1 applies a fix that stops animated svgs from breaking.

Here is the issue and commit that resolves it:

svg/svgo#213
svg/svgo@5f892ee

svgo 0.7.0 supports local custom plugin by specifying the fn property.

When running my task, gulp throws this error:

Possibly unhandled Error in plugin 'gulp-svgmin' Non-whitespace before first tag. at /Users/myuser/Documents/MVP/node_modules/gulp-svgmin/index.js:59:45 at /Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/lib/svgo.js:32:13 at Object.sax.onerror (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/lib/svgo/svg2js.js:120:9) at emit (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/node_modules/sax/lib/sax.js:615:33) at error (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/node_modules/sax/lib/sax.js:644:3) at strictFail (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/node_modules/sax/lib/sax.js:662:22) at Object.write (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/node_modules/sax/lib/sax.js:935:11) at module.exports (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/lib/svgo/svg2js.js:131:9) at SVGO.optimize (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/node_modules/svgo/lib/svgo.js:29:5) at Transform.stream._transform (/Users/myuser/Documents/MVP/node_modules/gulp-svgmin/index.js:57:14)

My task can be seen here:

gulp.task('svgCompress', function () { return gulp.src('app/images/**/*.svg') .pipe($.svgmin()) .pipe($.size()); });

Any chance you would be able to update the svgo dependency to be able to pull in the latest plugins released, specifically inlineStyles

gutil.File => https://www.npmjs.com/package/vinyl
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
gutil.colors => https://www.npmjs.com/package/ansi-colors
gutil.date => https://www.npmjs.com/package/date-format
gutil.log => https://www.npmjs.com/package/fancy-log
gutil.template => https://www.npmjs.com/package/lodash.template
gutil.env => https://www.npmjs.com/package/minimist
gutil.beep => https://www.npmjs.com/package/beeper
gutil.noop => https://www.npmjs.com/package/through2
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string '\n' in your code
gutil.combine => https://www.npmjs.com/package/multipipe
gutil.buffer => https://www.npmjs.com/package/list-stream
gutil.PluginError => https://www.npmjs.com/package/plugin-error

https://github.com/svg/svgo/releases/tag/v0.6.4

For example I want to change the floatPrecision using the cleanupNumericValues plugin. I tried this:

.pipe(svgmin({
    cleanupNumericValues: {
        floatPrecision: 1
        }
}))

Didn't seem to work... What am I missing here? Do I need to load the plugin itself somehow?

All the tag rect are replaced by path during compression.
Then the style on rect must be replace by style on path.
If I add, for example, this style in source:

a:hover path,
a:hover rect{
  stroke: rgb(140,2,9);
}

The minification remove the style on the path, because there is no path in source, and after change all the rect in path.

@ben-eb: svgo 1.0.0 and 1.0.1 have just been released which use a promise based API.

This postcss plugin should be updated to compatible with it, see
https://github.com/ben-eb/postcss-svgo/blob/master/src/index.js#L42 .

Example for using the new Promise based API, see
https://github.com/imagemin/imagemin-svgo/pull/27/files#diff-168726dbe96b3ce427e7fedce31bb0bcR18 .

Something like: ”icon.svg 3KB 1KB 33%“.

Specifically it would help resolve this issue.

As already mentioned in svgo gulp-svgmin does not respect the disabled "removeViewBox"-Plugin. My config looks like:

options : {
    plugins: [
        {
            removeViewBox: false
        },{
            addClassesToSVGElement: {
                classNames: ['svgo']
            }
        }
    ],
    js2svg: {
        pretty: true
    }
}

The class has been added to the svg element, but the viewbox unfortunately removed. Any ideas?

Hi there,

Hopefully this is the right place to post this. I'm getting an error that I've never had before and randomly mid-way through a project:

C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\lib\svgo\plugins.js
:46
        items.content = items.content.filter(function(item) {
                                     ^
TypeError: Cannot read property 'filter' of undefined
    at monkeys (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\lib
\svgo\plugins.js:46:38)
    at perItem (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\lib
\svgo\plugins.js:77:12)
    at C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\lib\svgo\plu
gins.js:18:24
    at Array.forEach (native)
    at module.exports (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\s
vgo\lib\svgo\plugins.js:14:13)
    at C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\lib\svgo.js:
63:17
    at Object.sax.onend (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules
\svgo\lib\svgo\svg2js.js:140:26)
    at emit (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\node_m
odules\sax\lib\sax.js:625:33)
    at end (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svgo\node_mo
dules\sax\lib\sax.js:667:3)
    at Object.write (C:\Users\mathew\Documents\Work\builds\www\projectname\node_modules\gulp-svgmin\node_modules\svg
o\node_modules\sax\lib\sax.js:929:30)

I've not changed anything or update any files. Can anyone point me in the right direction?

If I remove the svgmin task itself the build succeeds.

The task looks like:

gulp.task('svgmin', function() {
    return gulp.src('assets/images/svg/*.svg')
      .pipe(plumber())
        .pipe(svgmin())
        .pipe(gulp.dest('assets/images/svg'))
        .pipe(notify({message: 'svgs minified!'}));
});

Hello - great little set of scripts! Is there a way to convert any ids to classes or perhaps data-id ?

thanks, D.

https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

Hi @ben-eb
since there are some PR hanging in a limbo with you seemingly not maintaining the plugin, would you be interested in handing over maintainership to somebody else or maybe to https://github.com/gulp-community/ ?
If you just want some help without giving up maintainership, I am happy to offer my assistance.
Cceers

When using [email protected] bpm audit reports

  High            Denial of Service
  Package         css-what
  Patched in      >=5.0.1
  Dependency of   gulp-svgmin [dev]
  Path            gulp-svgmin > svgo > css-select > css-what
  More info       https://npmjs.com/advisories/1754

svgo issue to upgrade dependency: svg/svgo#1488

gulp-util now requires you to use new when instantiating a PluginError, otherwise it will throw an error.

I have this svg
`

after gulp-svgmin i get path without classes
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <path d="M0 0h48v48H0V0z" fill="none"/> <path d="M33.1 17.9L15.2 0l-2.8 2.8 4.8 4.8L6.9 17.9c-1.2 1.2-1.2 3.1 0 4.2l11 11c.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9l11-11c1.2-1.1 1.2-3.1 0-4.2zM10.4 20l9.6-9.6 9.6 9.6H10.4zM38 23s-4 4.3-4 7c0 2.2 1.8 4 4 4s4-1.8 4-4c0-2.7-4-7-4-7zM0 40h48v3H0z"/> </svg>

How to fix this?

The version of svgo used in the package.json's dependencies is out-of-date.

just failing hard

./node_modules/orchestrator/index.js:153
            throw err;
            ^

TypeError: Cannot read property 'on' of undefined
    at DestroyableTransform.Stream.pipe (stream.js:45:7)
    at Gulp.<anonymous> (./Gulpfile.js:57:6)
    at module.exports (./node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (./node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (./node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (./node_modules/orchestrator/index.js:134:8)
    at Gulp.<anonymous> (./node_modules/gulp/index.js:36:18)
    at Gaze.<anonymous> (./node_modules/glob-watcher/index.js:18:14)
    at emitTwo (events.js:100:13)
    at Gaze.emit (events.js:185:7)

section of gulpfile

gulp.task('serve', function() {
    gulp.watch('svg/**/*.svg',['svgminify']);
});

gulp.task('svgminify', function() {
    gulp.src('svg/**/*.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('./svgmin'));
});

gulp.task('default', ['serve']);

thoughts?

I found that the latest version of the plugin (v2.0.0) always cleanup viewBox attributes. In previous version those attributes applied to <symbol> tags.

I think it is a bug because I didn't find any info about such breaking changes in docs.

Dear Developers,
ill like that gulp Plugin and write my first plugin, and if you like it, i can try to push it to github.
But my problem is that i cannot bring it to my gulp.

Ill override the "addClassesToSVGElement" file and than it works, but wanne have my own file.
I am very new to this. Ill read the manual here:
https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md
but it doesnt work, do you have any glue ?

Thanks very much!
Sorry for my bad english.

Need to add info about pretty option from #16, caz nobody will look at closed issues.

You included with the last release lodash.clonedeep as devDependency which is required by

lodash.clonedeep should be required as a dependency and not as a devDependency.

I just switched from gulp-svgo because that doesn't seem to exist any more. When I run this, some of my svgs break. I am using 1.2.0

Hi,

the transformsWithOnePath plugin, produces the following error [TypeError: Cannot read property 'value' of undefined]

this is what my task currently looks like:

gulp.src([cfg.paths.assets+"webfont/*.svg"])
            .pipe(svgmin({
                plugins: [{
                    transformsWithOnePath: true
                }]
            }))
            .pipe(gulp.dest(cfg.paths.dest+'fonts/icons/'));

Any Help would be Greatly Appreciated.

I wanted to check if cleanupNumericValues should actually cleanup viewBox and paths?
I have used it like so;
.pipe($.svgmin({ plugins: [{ removeDimensions: true }, { cleanupNumericValues: { floatPrecision: 1 } }] }))

But the output SVG files come out like;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 456.814 456.814"><path d="M441.11 252.677c10.468-11.99 15.704-26.169 15.704-42.54 0-14.846-5.432-27.692-16.259-38.547-10.849-10.854-23.695-16.278-38.541-16.278h-79.082c.76-2.664 1.522-4.948 2.282-6.851.753-1.903 1.811-3.999 3.138-6.283 1.328-2.285 2.283-3.999 2.852-5.139 3.425-6.468 6.047-11.801 7.857-15.985 1.807-4.192 3.606-9.9 5.42-17.133 1.811-7.229 2.711-14.465 2.711-21.698 0-4.566-.055-8.281-.145-11.134-.089-2.855-.574-7.139-1.423-12.85-.862-5.708-2.006-10.467-3.43-14.272-1.43-3.806-3.716-8.092-6.851-12.847-3.142-4.764-6.947-8.613-11.424-11.565-4.476-2.95-10.184-5.424-17.131-7.421-6.954-1.999-14.801-2.998-23.562-2.998-4.948 0-9.227 1.809-12.847 5.426-3.806 3.806-7.047 8.564-9.709 14.272-2.666 5.711-4.523 10.66-5.571 14.849-1.047 4.187-2.238 9.994-3.565 17.415-1.719 7.998-2.998 13.752-3.86 17.273-.855 3.521-2.525 8.136-4.997 13.845-2.477 5.713-5.424 10.278-8.851 13.706-6.28 6.28-15.891 17.701-28.837 34.259-9.329 12.18-18.94 23.695-28.837 34.545-9.899 10.852-17.131 16.466-21.698 16.847-4.755.38-8.848 2.331-12.275 5.854-3.427 3.521-5.14 7.662-5.14 12.419v183.01c0 4.949 1.807 9.182 5.424 12.703 3.615 3.525 7.898 5.38 12.847 5.571 6.661.191 21.698 4.374 45.111 12.566 14.654 4.941 26.12 8.706 34.4 11.272 8.278 2.566 19.849 5.328 34.684 8.282 14.849 2.949 28.551 4.428 41.11 4.428h36.831c25.321-.38 44.061-7.806 56.247-22.268 11.036-13.135 15.697-30.361 13.99-51.679 7.422-7.042 12.565-15.984 15.416-26.836 3.231-11.604 3.231-22.74 0-33.397 8.754-11.611 12.847-24.649 12.272-39.115.024-6.097-1.4-13.328-4.261-21.706zM100.5 191.864H18.276c-4.952 0-9.235 1.809-12.851 5.426C1.809 200.905 0 205.188 0 210.137v182.732c0 4.942 1.809 9.227 5.426 12.847 3.619 3.611 7.902 5.421 12.851 5.421H100.5c4.948 0 9.229-1.81 12.847-5.421 3.616-3.62 5.424-7.904 5.424-12.847V210.137c0-4.949-1.809-9.231-5.424-12.847-3.617-3.618-7.898-5.426-12.847-5.426zM67.665 369.308c-3.616 3.521-7.898 5.281-12.847 5.281-5.14 0-9.471-1.76-12.99-5.281-3.521-3.521-5.281-7.85-5.281-12.99 0-4.948 1.759-9.232 5.281-12.847 3.52-3.617 7.85-5.428 12.99-5.428 4.949 0 9.231 1.811 12.847 5.428 3.617 3.614 5.426 7.898 5.426 12.847 0 5.14-1.805 9.468-5.426 12.99z"/></svg>

Is this a bug or have I misunderstood what cleanupNumericValues does or how to use it?

Thanks.

Comparing gulp-svgmin with grunt-svgmin, Expected a and enclosed to be merged into a with both classes, as in [email protected] example.

Original:
<svg> <g class="cls-abc"> <rect class="cls-def" x="50" y="20" width="150" height="150" /> </g> </svg>

[email protected] merges g & rect into a path and combines class values
<svg> <path class="cls-abc cls-def" d="M50 20h150v150H50z"/> </svg>

[email protected] & [email protected] leave the g & rect unmerged
<svg> <g class="cls-abc"> <path class="cls-def" d="M50 20h150v150H50z"/> </g> </svg>

This issue was observed on larger project files, converting a legacy grunt project to a gulp project. The test sample above was used to illustrate the issue.

Hi There,

Thanks for the great plugin. I tried to set to "removeDoctype" option because I am using the generated svg as inline svg sprites, but when I set that option, it still adds the doctype to the generated svg.

My Configuration:

const path = require('path');

module.exports = (gulp, plugins) => {
	return () => {
		return gulp
			.src('assets/icons/*.svg')
			.pipe(plugins.svgmin(function (file) {
				var prefix = path.basename(file.relative, path.extname(file.relative));
				return {
					plugins: [
						{
							removeDoctype: true
						}, {
							cleanupIDs: {
								prefix: prefix + '-',
								minify: true
							}
						}
					]
				}
			}))
			.pipe(plugins.svgstore())
			.pipe(gulp.dest('views/_partials'));
	};
};

Am I doing something wrong?

Thanks and regards best
Jan

I tried using svgmin for minifying (i.e clean up) svg's I use for generating icon fonts. Problem is when you run svgmin on the same file a couple of times, it compresses even further, making the svgs messed up.

Here's the result of the same .svg, run twice.

First run:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M405.346 333.738L265.914 112.206c-1.502-2.385-4.204-3.847-7.122-3.852h-.017c-2.91 0-5.61 1.45-7.12 3.823l-140.53 221.267c-1.557 2.452-1.607 5.512-.133 8.005 1.47 2.496 4.243 4.035 7.248 4.04l279.962.265h.01c2.995 0 5.763-1.536 7.24-4.024 1.476-2.487 1.44-5.54-.105-7.995zm-128.293-149.3l-3.858 82.78H242.48l-1.733-82.91 36.306.13zm-19.425 136.086c-10.876 0-19.694-8.822-19.694-19.7s8.818-19.698 19.694-19.698c10.882 0 19.698 8.822 19.698 19.7s-8.817 19.698-19.698 19.698z"/></svg>

Second run:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M405.346 333.738L265.914 112.206c-1.502-2.385-4.204-3.847-7.122-3.852h-.017c-2.91 0-5.61 1.45-7.12 3.823l-140.53 221.267c-1.557 2.452-1.607 5.512-.133 8.005 1.47 2.493 4.243 4.032 7.248 4.04l279.962.262h.01c2.995 0 5.763-1.536 7.24-4.024 1.476-2.488 1.44-5.54-.105-7.996zm-128.293-149.3l-3.858 82.78H242.48l-1.733-82.91 36.306.13zm-19.425 136.086c-10.876 0-19.694-8.822-19.694-19.7s8.818-19.698 19.694-19.698c10.882 0 19.698 8.822 19.698 19.7s-8.817 19.698-19.698 19.698z"/></svg>

Maybe it's not a problem with gulp-svgmin. I created svg sprite:

var gulp = require('gulp'),
    svgstore = require('gulp-svgstore'),
    svgmin = require('gulp-svgmin'),
    path = require('path'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber');

gulp.task('schedule_svg', function(){
    return gulp
        .src('/img/schedule_svg/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore({
            inlineSvg: true,
        }))
        .pipe(plumber())
        .pipe(rename('_schedule.svg'))
        .pipe(gulp.dest('../www/dist/img/svg'));
});

Insert file on page:
<?php echo file_get_contents("dist/img/svg/_schedule.svg");?>
Add svg element:
<svg class="icon icon-logo" fill="currentcolor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_RF_02"></use></svg>
In chrome i see logo. But in Mozilla logo without gradient.
Link to codepen with generated svg : http://codepen.io/Muskos/pen/dpjvvj

Can you help me with this?

Building on travis.org is ceased, so no tests are run on pull-requests and such.

Either this repo should be switched over to travis.com (must be done by the repo owner I guess) or to github actions which would require a PR with the workflow files.

I ran gulp svgmin and got the following warning. It looks like gulp-svgmin is using ^2.3.1 which is grabbing 2.4.0 which introduced this new warning per release tag: https://github.com/svg/svgo/releases/tag/v2.4.0

If I have some time I can try to make a PR to update the new preset-default config that svgo wants but doing a fresh install and run of the task should output this warning. But if someone gets to this we should update the version to be more explicitly 2.4.0+ with the new config

"extendDefaultPlugins" utility is deprecated. Use "preset-default" plugin with overrides instead. For example: { name: 'preset-default', params: { overrides: { // customize plugin options convertShapeToPath: { convertArcs: true }, // disable plugins convertPathData: false } } }

Just noticed this plugin is using SVGO 0.7.2. Can we upgrade to 1.0.5?

Wrong conversion of Fontawesome icon:
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone-square" class="svg-inline--fa fa-phone-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM94 416c-7.033 0-13.057-4.873-14.616-11.627l-14.998-65a15 15 0 0 1 8.707-17.16l69.998-29.999a15 15 0 0 1 17.518 4.289l30.997 37.885c48.944-22.963 88.297-62.858 110.781-110.78l-37.886-30.997a15.001 15.001 0 0 1-4.289-17.518l30-69.998a15 15 0 0 1 17.16-8.707l65 14.998A14.997 14.997 0 0 1 384 126c0 160.292-129.945 290-290 290z"></path></svg>
converts to
<symbol id="icon-phone-square-solid" viewBox="0 0 448 512"> <path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM94 416c-7.033 0-13.057-4.873-14.616-11.627l-14.998-65a15 15 0 18.707-17.16 NaN NaNlNaN NaNa15 15 0 117.518 4.289 NaN NaNlNaN NaNcNaN NaN NaN NaN NaN NaNlNaN NaNa15.001 15.001 0 1-4.289 NaN NaNlNaN NaNa15 15 0 117.16-8.707 NaN NaNlNaN NaNa14.997 14.997 0 1384 126 NaN NaNcNaN NaN NaN NaN NaN NaNz"></path> </symbol>

As I do the recommended :

gulp.task('default', function () {
    return gulp.src('logo.svg')
        .pipe(svgmin())
        .pipe(gulp.dest('./out'));
});

I get an heavily lightened svg (great!!) without knowing which of #of the SVGO plugins were ON and working. As a first-time users, I want to know what is on/off at normal usage. The current tutorial (README.md) would gain to explain or link to the default settings relative to these plugins.

After upgrading to [email protected], and with the provided example below, taken from the ReadMe, my svg viewbox is still getting removed:

    // Alter the default list of plugins.
    plugins: [
      // You can enable a plugin with just its name.
      'sortAttrs',
      {
        name: 'removeViewBox',
        // Disable a plugin by setting active to false.
        active: false,
      },
      {
        name: 'cleanupIDs',
        // Add plugin options.
        params: {
          minify: true,
        }
      },
    ],

to prevent deprecation warnings please upgrade SVGO to version 3.0

[18:19:25] Starting 'svgmin'...
[18:19:25] The following tasks did not complete: svgmin
[18:19:25] Did you forget to signal async completion?

I'd like to have the output XML pretty printed by using SVGO's pretty option. Is it currently possible to do that with gulp-svgmin?

I see that plugins can be disabled but I haven't found anything for SVGO options.

I am minifying a folder of about 100 SVGs. When I display more than one on a page it only displays the very first icon because the path ids are all being shortened to "a" or "b", it isn't unique to each SVG. Is there a way to avoid this?

Before:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55" height="44" viewBox="0 0 55 44">
  <defs>
    <path id="bar-chart-a" d="M49.079,44 L-5,44 L-5,0 L-3.033,0 L-3.033,42.032 L1.716,42.032 L1.716,30.216 L13.036,30.216 L13.036,42.032 L16.341,42.032 L16.341,8.534 L27.662,8.534 L27.662,42.032 L30.967,42.032 L30.967,21.162 L42.287,21.162 L42.287,42.032 L49.078,42.032 L49.078,44 L49.079,44 L49.079,44 Z M32.934,42.032 L40.318,42.032 L40.318,23.131 L32.934,23.131 L32.934,42.032 L32.934,42.032 Z M18.309,42.032 L25.696,42.032 L25.696,10.503 L18.309,10.503 L18.309,42.032 L18.309,42.032 Z M3.683,42.032 L11.069,42.032 L11.069,32.181 L3.683,32.181 L3.683,42.032 L3.683,42.032 Z"/>
    <rect id="bar-chart-c" width="55" height="44"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(5)">
    <mask id="bar-chart-b" fill="#fff">
      <use xlink:href="#bar-chart-a"/>
    </mask>
    <use fill="#000" xlink:href="#bar-chart-a"/>
    <g mask="url(#bar-chart-b)">
      <g transform="translate(-6)">
        <use fill="#000" xlink:href="#bar-chart-c"/>
      </g>
    </g>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="44" viewBox="0 0 45 44">
  <defs>
    <path id="decline-chart-a" d="M44.101,44 L0,44 L0,0 L1.968,0 L1.968,42.032 L7.03,42.032 L7.03,21.611 L8.996,21.611 L8.996,42.032 L14.057,42.032 L14.057,27.76 L16.023,27.76 L16.023,42.031 L21.085,42.031 L21.085,23.788 L23.052,23.788 L23.052,42.034 L28.114,42.034 L28.114,29.563 L30.081,29.563 L30.081,42.034 L35.143,42.034 L35.143,36.06 L37.11,36.06 L37.11,42.034 L42.134,42.034 L42.134,36.064 L44.102,36.064 L44.102,44 L44.101,44 L44.101,44 L44.101,44 Z M44.002,26.402 L35.247,26.397 L35.247,24.43 L40.961,24.432 L22.096,9.165 L17.543,15.212 L5.186,5.165 L6.427,3.638 L17.2,12.397 L21.75,6.354 L42.031,22.768 L42.025,17.663 L43.992,17.661 L44.002,26.402 L44.002,26.402 Z"/>
    <rect id="decline-chart-c" width="45" height="44"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="decline-chart-b" fill="#fff">
      <use xlink:href="#decline-chart-a"/>
    </mask>
    <use fill="#000" xlink:href="#decline-chart-a"/>
    <g mask="url(#decline-chart-b)">
      <g transform="translate(-1)">
        <use fill="#000" xlink:href="#decline-chart-c"/>
      </g>
    </g>
  </g>
</svg>

After:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55" height="44" viewBox="0 0 55 44"><defs><path id="a" d="M49.079 44H-5V0h1.967v42.032h4.749V30.216h11.32v11.816h3.305V8.534h11.321v33.498h3.305v-20.87h11.32v20.87h6.791V44h.001zm-16.145-1.968h7.384V23.131h-7.384v18.901zm-14.625 0h7.387V10.503h-7.387v31.529zm-14.626 0h7.386v-9.851H3.683v9.851z"/><path id="c" d="M0 0h55v44H0z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(5)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" xlink:href="#a"/><g mask="url(#b)"><use fill="#000" xlink:href="#c" transform="translate(-6)"/></g></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="44" viewBox="0 0 45 44"><defs><path id="a" d="M44.101 44H0V0h1.968v42.032H7.03V21.611h1.966v20.421h5.061V27.76h1.966v14.271h5.062V23.788h1.967v18.246h5.062V29.563h1.967v12.471h5.062V36.06h1.967v5.974h5.024v-5.97h1.968V44h-.001zm-.099-17.598l-8.755-.005V24.43l5.714.002L22.096 9.165l-4.553 6.047L5.186 5.165l1.241-1.527L17.2 12.397l4.55-6.043 20.281 16.414-.006-5.105 1.967-.002.01 8.741z"/><path id="c" d="M0 0h45v44H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" xlink:href="#a"/><g mask="url(#b)"><use fill="#000" xlink:href="#c" transform="translate(-1)"/></g></g></svg>

Here is the output:

[09:53:13] Using gulpfile ~/Github/vault-dashboard/gulpfile.js
[09:53:13] Starting 'images'...
Unhandled rejection Error: ENOENT: no such file or directory, open '/Users/212400520/Github/vault-dashboard/node_modules/svgo/lib/svgo/../../.svgo.yml'
    at Object.fs.openSync (fs.js:558:18)
    at Object.fs.readFileSync (fs.js:468:33)
    at module.exports (/Users/212400520/Github/vault-dashboard/node_modules/svgo/lib/svgo/config.js:31:48)
    at new module.exports (/Users/212400520/Github/vault-dashboard/node_modules/svgo/lib/svgo.js:21:19)
    at buf (/Users/212400520/Github/vault-dashboard/node_modules/imagemin-svgo/index.js:16:15)
    at /Users/212400520/Github/vault-dashboard/node_modules/promise.pipe/index.js:25:18
    at process._tickCallback (internal/process/next_tick.js:103:7)

Any thoughts on why this is happening?

Need to get svgjs data

this is an error of svgo, here is the issue

svgo has released 1.1.1 to fix the issue, can you update it? thanks very much~