vue-svg-loader加载SVG时移除部分<g>标签问题咨询

你已经搞定了ID保留的配置，但标签被移除大概率是svgo的其他默认插件在“悄悄干活”！

可能的原因 #

svgo默认启用了一些清理“无用”容器的插件，比如removeEmptyContainers——它会自动移除没有子元素、也没有任何属性（比如id、class、样式）的标签；另外像mergePaths这类插件如果合并了路径，也可能间接导致外层失去内容被清理。

解决方案：修改svgo配置，禁用相关清理插件 #

把这些可能移除的插件明确设置为禁用，更新你的loader配置：

{ 
  test: /\.svg$/, 
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: { 
    svgo: { 
      plugins: [ 
        {removeDoctype: true}, 
        {removeComments: true}, 
        {cleanupIDs: false},
        {removeEmptyContainers: false}, // 关键：禁用移除空容器的逻辑
        {mergePaths: false} // 可选：如果路径合并导致<g>变空，也禁用这个插件
      ] 
    } 
  }
}

额外排查点 #

如果修改后还是有被移除，你可以检查下目标SVG：

• 被移除的是不是真的没有子元素，也没有id、class、样式这类属性？如果是这种情况，svgo还是会判定它是无用节点；
• 可以尝试把svgo的plugins简化为plugins: [{cleanupIDs: false}]（只保留你需要的配置，禁用所有默认插件）来测试，逐步排查是哪个插件导致的问题。

内容的提问来源于stack exchange，提问作者user3277834