Not working in Chrome 76

[demyan1411]

I think I found a bug: I use extract mode. In your loader there is moveGradientsOutsideSymbol and in your code it said that this is for firefox, But after build - svg-sprite not working (not visible) in chrome 76

• Node.js version: 10.16
• webpack version: 4
• svg-sprite-loader version: 4.1.6
• OS type & version: MaOs Mojave

You can try with this svg icon:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
    <defs>
        <linearGradient id="a" x1="11.313%" y1="49.219%" y2="50.781%">
            <stop offset="0%" stop-color="#8FBDFF"/>
            <stop offset="100%" stop-color="#4D82D5"/>
        </linearGradient>
        <linearGradient id="b" x1="0%" y1="50.781%" y2="49.219%">
            <stop offset="0%" stop-color="#295296"/>
            <stop offset="100%" stop-color="#3E78D3"/>
        </linearGradient>
        <linearGradient id="c" x1="0%" y1="65.68%" y2="34.32%">
            <stop offset="0%" stop-color="#70B1FF"/>
            <stop offset="100%" stop-color="#005CCD"/>
        </linearGradient>
        <linearGradient id="d" x1="100%" x2="0%" y1="54.734%" y2="45.266%">
            <stop offset="0%" stop-color="#A8CBF5"/>
            <stop offset="100%" stop-color="#ADCFF8"/>
        </linearGradient>
        <linearGradient id="e" x1="86.735%" x2="13.265%" y1="100%" y2="0%">
            <stop offset="0%" stop-color="#71A1E8"/>
            <stop offset="100%" stop-color="#7EADF0"/>
        </linearGradient>
        <linearGradient id="f" x1="0%" y1="36.557%" y2="63.443%">
            <stop offset="0%" stop-color="#74A6EF"/>
            <stop offset="100%" stop-color="#6598E6"/>
        </linearGradient>
        <linearGradient id="g" x1="11.313%" y1="31.065%" y2="68.935%">
            <stop offset="0%" stop-color="#4C83E5"/>
            <stop offset="100%" stop-color="#4178DB"/>
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <path fill="url(#a)" d="M71 42l-7-6H14l-7 6v2h64z"/>
        <path fill="url(#b)" d="M89 82l-7-6H32l-7 6v2h64z"/>
        <path fill="url(#c)" d="M17 8h44a3 3 0 0 1 3 3v25H14V11a3 3 0 0 1 3-3zM35 48h44a3 3 0 0 1 3 3v25H32V51a3 3 0 0 1 3-3z" opacity=".45"/>
        <path fill="url(#d)" d="M43.436 48A34.19 34.19 0 0 1 41 44h9.233A25.821 25.821 0 0 0 54 48H43.436z"/>
        <path fill="url(#e)" d="M37.947 36A34.087 34.087 0 0 1 37 28h-5l9-13 9 13h-4.96l-.04.133A25.974 25.974 0 0 0 46.254 36h-8.307z"/>
        <path fill="url(#f)" d="M43 48h10.687c4.423 3.747 10.11 6 16.313 6v8c-11.097 0-20.93-5.515-27-14z"/>
        <path fill="url(#g)" d="M51 44h-9.847A33.074 33.074 0 0 1 38 36h8.6a25.656 25.656 0 0 0 4.4 8z"/>
    </g>
</svg>

Webpack config:

{
    extend (config, { isDev, loaders }) {
            const uikitSVG = 'node_modules/site-vuejs-uikit/src/assets/images/svg';
            const uikitSVGPath = path.resolve(__dirname, uikitSVG);

            const urlLoader = config.module.rules.find(rule => String(rule.test).includes('svg'));
            urlLoader.exclude = uikitSVGPath;

            config.module.rules.push({
                test: /\.(svg)(\?.*)?$/,
                include: [
                    uikitSVGPath,
                ],
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                            spriteFilename: 'img/icons.svg',
                        }
                    },
                    'svgo-loader'
                ]
            });

            return config;
        },

        // Add svg-sprite plugin
    plugins: [
            new SpriteLoaderPlugin({ plainSprite: true })
        ]
}

[kisenka]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[sam-binary]

@demyan1411 I have the same issue, is there a solution already?