SVGO优化插件：reusePaths路径复用技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00429/article/details/148362403

SVGO优化插件：reusePaths路径复用技术详解

svgo ⚙️ Node.js tool for optimizing SVG files 项目地址: https://gitcode.com/gh_mirrors/sv/svgo

什么是reusePaths插件

reusePaths是SVGO（SVG优化工具）中的一个重要插件，它的核心功能是通过识别和复用SVG文档中重复的路径元素来显著减小文件体积。该插件会自动分析文档中所有<path>元素，找出具有相同路径数据（d属性）和相同样式属性（fill和stroke）的路径，然后将它们转换为引用同一个定义的<use>元素。

工作原理

路径分析阶段：插件会扫描SVG文档中的所有<path>元素，比较它们的d（路径数据）、fill（填充颜色）和stroke（描边颜色）属性值。
定义创建阶段：当发现两个或多个路径具有完全相同的上述属性值时，插件会将其中一个路径移动到<defs>区域（如果不存在则创建该区域），作为可复用的定义。
引用替换阶段：原始文档中的这些相同路径会被替换为<use>元素，通过xlink:href或href属性引用刚才创建的共用定义。
属性保留机制：如果原始路径包含其他属性（如transform变换、style样式等），这些属性会被保留在新的<use>元素上，确保视觉效果不会改变。

技术优势

文件体积优化：通过复用相同路径，避免了重复的路径数据定义，可以显著减小SVG文件大小。
DOM结构简化：减少了文档中的元素数量，使得DOM结构更加清晰简洁。
维护性提升：当需要修改共用路径时，只需修改一处定义即可全局生效。

使用场景

图标系统：包含大量重复图标的SVG文档，如字体图标库或UI组件库。
重复图案：包含重复几何图案的背景或装饰性SVG图形。
数据可视化：图表中重复出现的图形元素，如柱状图的柱子、饼图的切片等。

兼容性说明

SVG 1.1：默认生成的引用使用xlink:href属性，这是SVG 1.1的标准方式。
SVG 2.0/HTML：如果需要兼容SVG 2.0或HTML内联SVG，建议在优化流程的最后阶段使用removeXlink插件，将xlink:href转换为标准的href属性。

最佳实践

优化顺序：建议将reusePaths放在优化流程的前期阶段，以便后续插件可以基于简化后的结构进行其他优化。
属性一致性：确保需要复用的路径在d、fill和stroke属性上完全一致，否则不会被识别为可复用路径。
性能考量：对于非常简单的路径或复用次数很少的路径，手动处理可能比使用插件更高效。

示例说明

假设原始SVG包含三个相同的星形路径：

<svg>
  <path d="M10 0L12 6H18L13 10L15 16L10 12L5 16L7 10L2 6H8Z" fill="gold"/>
  <path d="M10 0L12 6H18L13 10L15 16L10 12L5 16L7 10L2 6H8Z" fill="gold"/>
  <path d="M10 0L12 6H18L13 10L15 16L10 12L5 16L7 10L2 6H8Z" fill="gold"/>
</svg>

经过reusePaths处理后：

<svg>
  <defs>
    <path id="path1" d="M10 0L12 6H18L13 10L15 16L10 12L5 16L7 10L2 6H8Z" fill="gold"/>
  </defs>
  <use href="#path1"/>
  <use href="#path1"/>
  <use href="#path1"/>
</svg>