Generated PNG's colour palette issue

[SasSam]

Hi,

I've created a test project with few social SVG icons and the PNG image has got wrong colours. Please check the PNG file in my test repo: https://github.com/SasSam/dr-svg-test/blob/master/output/icon-sprite.png

What did I wrong? Or is it a bug?

Thanks!

[phloe]

Yeah - it kind of is a bug.

The things is that each color gradient in your icons has an id (from the source of facebook.svg):

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse"  ... >

But when all your icons have the same id (SVGID_1_) and the sprite builder basically just lumps your icons into the same sprite file - all of your icons will get the same color gradient (the first one encountered in the file with that id - I suspect). Not optimal.

I will try to come up with an actual fix for this - but I can't make any promises on the timeline of it.

So... in the meantime you could try editing the id's manually so they have unique names - maybe just SVGID_1_, SVGID_2_ etc. If that doesn't work by itself you might also need to add the following to your options (options.svgo):

var options = {
    // some options
    svgo: {
        plugins: [
            { cleanupIDs: false }
        ]
    },
    // more options
}

Just to make sure the sprite builder won't mess with the id's...

I hope that helps :)

[phloe]

FWIW this behavior should be fixed now - without you having to do anything other than updating your npm dependencies: npm cache clean and npm install.

[SasSam]

Hi,

Sorry for late answer, I was off last week. Yeah, it's brilliant, working perfectly now! Thank you for your quick answer and prompt fix!

[phloe]

Cool! Closing the issue :)