SVG: linearGradient elements don't have unique ids, so there's "colour bleeding" between SVG flags

[horeamarc]

There are a lot of flags with linear gradients, which are give ids like "linearGradient-1".."linearGradient-n".

So, let's say you have the AR flag, followed by RO. AR has two linear-gradient elements: id="linearGradient-1" and id="linearGradient-2" RO has 3: id="linearGradient-1", id="linearGradient-2" and id="linearGradient-3"

In this case, if they are on the same HTML page, the RO flag will use the gradients 1 and 2 from the AG file: AG: => RO: , AUS: , UK:

[blommegard]

Uh, this is not that nice at all. I guess the best way to solve this would be to go over each flag and assign random id fields to each of them?

[horeamarc]

Uh, this is not that nice at all. I guess the best way to solve this would be to go over each flag and assign random id fields to each of them?

Yes, that was my initial thought...to use unique IDs...but then I've switched to use the PNG ones, instead. Thanks for your thoughts.

[blommegard]

Uh, this is not that nice at all. I guess the best way to solve this would be to go over each flag and assign random id fields to each of them?

Yes, that was my initial thought...to use unique IDs...but then I've switched to use the PNG ones, instead. Thanks for your thoughts.

Thanks for the reply, and happy that the png option worked. Might still be something to think about doing to help others tho.

[sandgraham]

One solution is to use an svg optimization library such as svgo to prefix all the IDs with a code unique to each SVG.

Here is some example code (for Node) that I used in my own project. You can generalize this to run over each file, but the main bit is to use the cleanupIDs plugin with svgo.

const fs = require('fs');
const SVGO = require('svgo');

// Processing US only

const svgo = new SVGO({
  plugins: {
    // lots of plugins & optimizations available
    cleanupIDs: {
      prefix: 'US'
    }
  }
});

const svgUS = fs.readFileSync('./US.svg').toString();
svgo.optimize(svgUS).then(res => {
  fs.writeFileSync('./optimized/US.svg', res.data);
}) ;