ID collisions with multiple SVG

See original GitHub issue

With React + Webpack when I load multiple SVG in the same component (SVG is in the dom), ids are the same in multiple SVG :

First SVG result :

<svg width="158" height="185" xmlns:xlink="http://www.w3.org/1999/xlink" class="sc-fYxtnH hSLfWw">
<defs>
<linearGradient x1="0%" y1="100%" y2="0%" id="c">
...

Second SVG result :

<svg width="23" height="23" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <path d="M22.733 1-.267-2.09z" id="c"></path>
  </defs>
  <g fill="none" fill-rule="evenodd"> 
      <g>
          <mask id="d" fill="#fff">
              <use xlink:href="#c"></use>
          </mask>
          <path fill="#EA4335" fill-rule="nonzero" mask="url(#d)" d="M-1.07 4.705L8.023 11.5l3.744-3.189 12.838-2.038v-7.318H-1.07z"></path>
      </g>
...

The second SVG is not rendered correctly because of that. When i remove the first SVG everything works fine.

Here is my Webpack config :

{
  test: /\.svg$/,
  use: [{
    loader:'@svgr/webpack',
    options: {
      "svgoConfig": {
        "plugins": [{ "cleanupIDs": true }]
      }
    }
  }]
}

Is there something I forgot ? Thanks

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:11 (3 by maintainers)

Top GitHub Comments

8reactions

wbobeirnecommented, Oct 31, 2018

I ran into this with linear gradients, fortunately some searching around led me here. However, this seems like a pretty disastrous default. I was able to fix mine with a simplified version of the hashing solution:

const hash = require('string-hash');

...

use: ({ resource }) => ({
  loader: '@svgr/webpack',
  options: {
    svgoConfig: {
      plugins: [{
        cleanupIDs: {
          prefix: `svg-${hash(resource)}`,
        },
      }],
    },
  },
}),

Is there a way we could get the default behavior to be more like this hashing solution? Seems like this is a fairly common problem.

8reactions

jjmax75commented, Aug 22, 2018

found this - https://github.com/svg/svgo/issues/674#issuecomment-324193597

the next one is a fix too

Hope it helps

 {
            test: /\.svg$/,
            use: ({resource}) => ({
                loader: '@svgr/webpack',
                options: {
                  svgoConfig: {
                    plugins: [{
                      "cleanupIDs": {
                        "prefix": `svg${hash(relative(context, resource))}`
                      }
                    }]
                  }
                }
              })
          }