Preserve svg with styles attribute

[gNesh01]

Hi, I have following svg HERE with style attr. and radialGradient.

When I generate sprite.svg I lost background colors (and via css "fill" I can set just one color).

This is my setup: new SVGSpritemapPlugin( './svg/*.svg', { output: { svgo: false, filename: 'sprite.svg' }, sprite: { generate: { title: false } }, } ),

Is there any chance to do that?

Thanks

[maxgram]

@gNesh01 I believe the svg file is not properly formatted, please refer to the docs here (radialGradient needs to be placed inside defs). As for the css fill color, please take a look here.

[gNesh01]

@maxgram Thanks for your reply. I've tried but I get same result :(

I've added this svg from "basic example" here and get the same outcome.

Its dark. When I apply css "fill", I can only fill it with "single" color.

Is there any chance that you provide some example of this working?

Thank you so much

[maxgram]

@gNesh01 single color seem to be expected behaviour. Also, according to this comment radial gradient might not be supported in the svg sprite

[cascornelissen]

@gNesh01, with svgo set to false this plugin shouldn't touch the SVG's contents at all. So, if rendering issues appear after inserting it into the generated spritemap it's likely an issue with the source SVG, as @maxgram mentioned, thanks for the help, by the way ❤️

Having said that, I've just tried putting the SVG you referenced into the simple example and the output seems correct to me? Unless you provide a complete minimal reproduction repository (as requested in the ticket template) I don't think there's much any of us can do, other than guessing what the problem might be.

[gNesh01]

@cascornelissen, I have already svgo set to false.

Just one thing please. Can you provide me link or code for your generated sprite.svg with my SVG image, from your example? I will compare yours and mine output and find mistake/solution.

Thanks

[cascornelissen]

@gNesh01, I know you have, I was commenting on the fact that this plugin doesn't do any transformations on the contents of the SVG as long as the svgo option is set to false. Therefor I think there's a big chance the issue your seeing is not related to this plugin.

I've tested it by modifying examples/simple/webpack.config.js to match the following configuration (I've added use: true so that the sprites are rendered when opening the SVG in a browser).

const SVGSpritemapPlugin = require('../..');

module.exports = {
    plugins: [
        new SVGSpritemapPlugin('src/sprites/*.svg', {
            output: {
                svgo: false,
                filename: 'sprite.svg'
            },
            sprite: {
                generate: {
                    title: false,
                    use: true
                }
            }
        })
    ]
};

That generates the following sprite.svg...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><symbol style="enable-background:new 0 0 24 24;" id="sprite-1" viewBox="0 0 24 24">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#45C5EB;}
    .st2{fill:url(#SVGID_1_);}
</style>
    <g>
    <g>
        <path class="st0" d="M9.39,10.97c-0.12,0.29-0.23,0.55-0.35,0.82c-0.22,0.52-0.45,1.05-0.67,1.57c-0.04,0.1-0.09,0.15-0.2,0.14    c-0.13-0.01-0.26-0.01-0.39,0c-0.11,0.01-0.12-0.04-0.08-0.13c0.24-0.55,0.47-1.1,0.71-1.66c0.09-0.21,0.18-0.42,0.27-0.64    c0.03-0.08,0.08-0.12,0.17-0.12C9.03,10.97,9.2,10.97,9.39,10.97z"/>
        <path class="st0" d="M6.81,12.41c0.03,0.79,0.36,1.42,1.02,1.87c0.06,0.04,0.14,0.07,0.08,0.17c-0.04,0.08-0.08,0.08-0.14,0.04    c-0.64-0.41-1.03-0.98-1.14-1.73c-0.11-0.74,0.09-1.41,0.59-1.97c0.4-0.46,0.91-0.72,1.52-0.81c0.31-0.04,0.61-0.03,0.92,0.05    c0.04,0.01,0.13-0.02,0.11,0.08c-0.02,0.08-0.05,0.14-0.16,0.12c-0.2-0.05-0.4-0.07-0.61-0.06c-1.05,0.01-2.02,0.88-2.15,1.92    C6.83,12.19,6.81,12.3,6.81,12.41z"/>
        <path class="st0" d="M9.08,14.86c-0.19,0-0.35-0.02-0.52-0.06c-0.06-0.01-0.13-0.01-0.09-0.1c0.02-0.06,0.03-0.13,0.15-0.11    c0.37,0.08,0.74,0.06,1.11-0.04c0.83-0.23,1.49-1.01,1.58-1.85c0.1-0.88-0.22-1.58-0.92-2.11c-0.04-0.03-0.08-0.05-0.1-0.09    c-0.03-0.06,0.01-0.12,0.04-0.15c0.04-0.05,0.08,0.01,0.12,0.03c0.64,0.45,1.01,1.06,1.07,1.84c0.11,1.27-0.77,2.37-2.01,2.6    C9.36,14.85,9.21,14.87,9.08,14.86z"/>
        <path class="st0" d="M9.73,11.75c0.26,0.6,0.5,1.16,0.75,1.75c-0.21,0-0.4,0-0.6,0c-0.06,0-0.08-0.05-0.09-0.09    c-0.12-0.27-0.23-0.55-0.35-0.82c-0.02-0.05-0.03-0.1,0-0.15C9.52,12.23,9.62,12,9.73,11.75z"/>
        <path class="st1" d="M13.24,12.26c0-0.63,0.13-1.23,0.38-1.78c-0.55-0.81-1.61-1.2-2.58-0.82c-0.1,0.04-0.14,0.01-0.19-0.07    c-0.65-1.2-1.94-1.85-3.3-1.69c-1.54,0.19-2.76,1.46-2.87,3c-0.02,0.26-0.02,0.26-0.26,0.28c-1.29,0.14-2.18,1.4-1.88,2.65    c0.24,1.01,1.1,1.71,2.14,1.71c1.5,0,3.01,0,4.51,0c1.51,0,3.02,0,4.53,0c0.29,0,0.56-0.06,0.8-0.18    C13.73,14.57,13.24,13.48,13.24,12.26z"/>
    </g>

        <radialGradient id="SVGID_1_" cx="78.8536" cy="111.1471" r="6.0932" gradientTransform="matrix(0.2913 0.895 -0.8833 0.2875 91.8604 -92.3137)" gradientUnits="userSpaceOnUse">
        <stop offset="0" style="stop-color:#FFF47C"/>
            <stop offset="0.32" style="stop-color:#FFCA05"/>
            <stop offset="0.5319" style="stop-color:#FFCA05"/>
            <stop offset="0.85" style="stop-color:#F9A51A"/>
            <stop offset="1" style="stop-color:#FCB813"/>
    </radialGradient>
        <path class="st2" d="M21.52,12.27c0,2.13-1.72,3.85-3.85,3.85c-2.13,0-3.85-1.72-3.85-3.85c0-2.13,1.72-3.85,3.85-3.85   C19.79,8.42,21.52,10.15,21.52,12.27z"/>
</g>
</symbol><use x="0" y="0" style="enable-background:new 0 0 24 24;" xlink:href="#sprite-1" width="24" height="24"/></svg>

Which when opened in a browser (Firefox, Edge) looks like this on my end.

Which matches (other than size which makes sense) with what I see when opening the source SVG in the same browser.

---

But having typed all of this out, this is a bit of a reverse situation because I'm creating the minimal reproduction for you at this point... Be aware that not every maintainer might want to spend so much time on helping everyone out ✌🏼

[gNesh01]

@cascornelissen THANK YOU SO MUCH!