我们正在使用插件将所有SVG图标组合成几个spritesheets。这样，当用户悬停或聚焦图像时，在下载图像时将不会有闪光，因为图像与未图像的图像在同一个精灵表中，因此已经下载。这也减少了请求，从而减少了带宽以及用户需要等待查看页面的时间。
我们目前正在使用一个插件，它只是将所有SVG精灵组合到一个SVG spritesheet中，但所有SVG都直接在meta-SVG中。我们已经开始转移到gulp-svgstore，这会将SVG放入不同的<symbol>中。然后，我们使用<use>引用正确的图标。
问题在于，理想情况下，我们需要每个<symbol>中的整个SVG图标，因此图标可以由（需要）对编程知之甚少的设计人员创建。 <use>元素似乎不接受渐变之类的东西。它们可能不允许在规范中，但实际上浏览器只是忽略它们。我们有一个有趣的情况，Internet Explorer 11正确显示图像，但其他浏览器没有，因为我们用于<use>的polyfill只是将内部SVG的内容填充到外部SVG中，而其他浏览器实际上<use>内部SVG。
有没有办法将渐变等元数据添加到<symbol>引用的<use>元素中？