SVGR工具为何合并同填充色的SVG路径？如何规避该行为？

为什么SVGR会合并同填充色的路径？ #

SVGR默认集成了SVGO（SVG优化工具），其中的mergePaths插件会自动合并具有相同填充、描边等视觉属性的路径——这是SVG优化流程里的常规操作，核心目的是精简代码体积，优化最终生成的React组件性能。对你提供的SVG来说，两个fill="#E24B4B"的路径视觉属性完全一致，因此被识别为可合并的目标。

如何避免路径被合并？ #

有几种实用方法可以阻止这种合并行为：

• 禁用SVGO的mergePaths插件
  如果是在项目中使用SVGR（比如webpack、Vite环境），可通过配置关闭该优化项：

  {
    svgo: {
      plugins: [
        { mergePaths: false }
      ]
    }
  }
  

  若是在线Playground场景，可在设置中找到SVGO相关选项，取消勾选mergePaths即可。

• 给路径添加差异化属性
  给需要保留独立的路径添加唯一标识属性（比如id、自定义data-*属性），让SVGO判定它们是具有不同用途的元素，不会触发合并。示例：

  <path fill="#E24B4B" id="icon-top" d="..." />
  <path fill="#E24B4B" id="icon-bottom" d="..." />
  

原始SVG代码 #

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#232323" d="M425.5 52C419 52 413.75 57.25 413.75 63.75C413.75 70.25 419 75.5 425.5 75.5C432 75.5 437.25 70.25 437.25 63.75C437.25 57.25 431.75 52 425.5 52ZM425.5 73.25C420.5 73.25 416.25 69 416.25 63.75C416.25 58.5 420.5 54.25 425.5 54.25C430.5 54.25 434.75 58.5 434.75 63.75C434.75 69 430.5 73.25 425.5 73.25Z" />
<path fill="#E24B4B" d="M425.5 52C419 52 413.75 57.25 413.75 63.75C413.75 70.25 419 75.5 425.5 75.5C432 75.5 437.25 70.25 437.25 63.75C437.25 57.25 431.75 52 425.5 52ZM425.5 73.25C420.5 73.25 416.25 69 416.25 63.75C416.25 58.5 420.5 54.25 425.5 54.25C430.5 54.25 434.75 58.5 434.75 63.75C434.75 69 430.5 73.25 425.5 73.25Z" />
<path fill="#E24B4B" d="M308.5 432.75C303.75 432.75 300 436.5 300 441.25C300 446 303.75 449.75 308.5 449.75C313.25 449.75 317 446 317 441.25C317 436.75 313.25 432.75 308.5 432.75ZM308.5 447.5C305.25 447.5 302.5 444.75 302.5 441.25C302.5 437.75 305.25 435 308.5 435C311.75 435 314.5 437.75 314.5 441.25C314.5 444.75 311.75 447.5 308.5 447.5Z" />
<defs>
<clipPath id="clip0_17059_14713">
<rect width="450" height="400" fill="white" transform="translate(22.5 50)"/>
</clipPath>
</defs>
</svg>

合并效果示意图 #

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