Webpack SVG gradient issues

user_11716688 0
Viewed 472

I'm trying to build svg sprites with webpack and svg-spritemap-webpack-plugin. While it's building nice sprites with regular svgs, it doesn't render svgs with gradients and I can't get why.

A piece of webpack config related to sprites generation:

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: true,
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),

an svg icon I'm trying to work with:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-35.2988" y1="646.7559" x2="-35.2988" y2="623.7559" gradientTransform="matrix(22.2609 0 0 -22.2609 1041.7826 14397.3477)">
    <stop  offset="0" style="stop-color:#1AD6FD"/>
    <stop  offset="1" style="stop-color:#1D67F0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M367.304,133.565H11.13c-6.144,0-11.13,4.986-11.13,11.13V500.87
    C0,507.014,4.986,512,11.13,512h356.174c6.144,0,11.13-4.986,11.13-11.13V144.696C378.435,138.552,373.448,133.565,367.304,133.565
     M512,11.13v356.174c0,6.144-4.986,11.13-11.13,11.13h-89.043c-6.144,0-11.13-4.986-11.13-11.13v-244.87
    c0-6.144-5.009-11.13-11.13-11.13h-244.87c-6.144,0-11.13-4.986-11.13-11.13V11.13c0-6.144,4.986-11.13,11.13-11.13H500.87
    C507.014,0,512,4.986,512,11.13"/>
</svg>

it seems that it's passed correctly to the sprite (with gradient and correct ids), but still I see a blind spot instead of icon when I'm trying to use it.

Also, it seems this issue is not about svgo and its settings. If I remove svgo and svg4everybody from my config, I still can't see the icon (while other icons with fill-only styles are visible)

webpack svg html
2 Answers

It was solved with additional settings of svg4everybody:

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: {
           polyfill: true // this line makes things work
        },
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),
user_117166880

I cannot really comment on Webpack, not using it, yet strictly speaking your linearGradient tag should be inside the defs tag to be 100% compliant with SVG 1.1 specification.

And the other thing you may try is to use full open and close tags so <.path>...</.path> (without dots to show here) instead of shorthanded one <path ... />. Often validators choke with shorthanded tags as this is not really proper hierarchy for a strict SVG/XML parser. With that in mind you might try ditching the xml tag as well.

user_21035390
Related