extract: true produces sprite with broken structure (all symbols and gradients included in def)

[adenisovgit]

First I used loader without extraction and it works perfect, just index.html has too heavy - plus 600kb. Structure of svg sprite in this mode was: All the symbols on upper level. all the gradients inside defs inside symbols - that is OK.

Then I set extract: true and resulted sprite.svg has a broken structure = symbols and gradients on same level inside def. As a result - svg can't get the gradients:

Why the sprite structure is changed? How I could return extracted sprite to normal structure?

• Node.js version: 14.2.0
• webpack version: 4.30.0
• svg-sprite-loader version: ^4.3.0
• OS type & version: macos 10.15.4

Sincerely, Andrey.

[adenisovgit]

I resolved the issue with recommendation from this issue, with direct DOM manipulation:

function arrayFrom(arrayLike) {
  return Array.prototype.slice.call(arrayLike, 0);
}

const moveSymbolsDown = (svg) => {
  arrayFrom(svg.querySelectorAll('symbol')).forEach((symbol) => {
    symbol.parentNode.after(symbol);
  });
};

Just keep in mind, when you inject sprite in document do not use "display: none" for hiding the spritestorage, because this will lead to losing gradients. Hide it with positioning, for instance.