vue-svg-loader removes some <g> tags while loading SVGs

[valangar]

I am loading an external svg into my Vue application as a Vue Component using the vue-svg-loader: https://www.npmjs.com/package/vue-svg-loader?activeTab=readme. I modified the loader configuration to make sure the IDs don't get dropped:

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false}
      ]
    }
  }
}

The svg I am trying to load looks something like this:

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <g class="group-2">
      <path id="d"></path>
   </g>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <g class="group-4">
      <path id="h"></path>
   </g>
   <g class="group-5">
   </g>
</svg>

Using the loader, the svg loads successfully, but some of the tags get dropped. The resulting looks as follows:

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <path id="d"></path>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <path id="h"></path>
</svg>

"group-2", "group-4" and "group-5" get dropped, but the paths inside are intact.

Is there someway to prevent this optimization the loader might be trying to do by removing the tags with one or less paths?

[visualfanatic]

@varsha-alangar could you try the following loader configuration?

{
  test: /\.svg$/,
  loader: 'vue-svg-loader',
  options: {
    svgo: {
      plugins: [
        { collapseGroups: false },
        { removeEmptyContainers: false },
      ],
    },
  },
},

[valangar]

That worked perfectly! Thanks!

[morphatic]

Here is the configuration in Vue CLI format for anyone who gets here and needs that:

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            { collapseGroups: false },
            { removeEmptyContainers: false }
          ],
        },
      })
  },
}

Of if you're doing BOTH the above AND you want to also be able to serve external SVGs:

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            { collapseGroups: false },
            { removeEmptyContainers: false }
          ]
        }
      })
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
  }
}

FANTASTIC package!! Thank you @visualfanatic

I should note that the reason I needed these settings is that when you export SVG from Adobe Illustrator, it produces a bunch of <g> elements whose primary function is to modify the blend mode of several layers. I'm not a graphic designer, nor an Illustrator expert, so I'm pretty much a hack when it comes to these things, but hopefully this can help someone else figure things out.