When minifying multiple svg - all IDs are the same

[caraclarke]

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>

[TheDancingCode]

Disable the cleanupIDs plugin by using the plugins option:

gulp.task('default', function () {
    return gulp.src('src/logo.svg')
        .pipe(svgmin({
            plugins: [{
                cleanupIDs: false
            }]
        }))
        .pipe(gulp.dest('dist'));
});

[caraclarke]

Thank you!