极致精简SVG需四步：一、设计工具导出前关闭元数据、删隐藏图层、合并路径、扁平化效果；二、用SVGO多轮压缩并启用关键插件；三、内联前手动删命名空间、简化path、合并样式、用CSS控制颜色尺寸；四、工程化集成构建流程。
直接用 Sketch 或 Figma 导出的 SVG 代码通常包含大量冗余：无用的命名空间、编辑器元数据、隐藏图层、冗余属性、未压缩路径指令、重复样式等。极致精简不是简单删空格，而是有策略地剥离非渲染必需信息，同时确保视觉和交互行为完全不变。
一、导出前在设计工具里“减负”
这是最高效、最容易被忽略的一步：
- 关闭“导出时包含元数据”选项（Figma 默认关，Sketch 需手动取消勾选 “Include original assets metadata”）
- 删除所有隐藏图层、未命名图层、辅助线、参考线；只保留最终要导出的图层组，并重命名为语义化名称（如 icon-home、logo-text），避免生成无意义 ID（如 layer_123）
-
合并同类路径：多个同色同描边的相邻形状，用布尔运算合并为单个
<path>，减少节点数和标签数量 -
扁平化效果：禁用阴影、模糊、渐变叠加等无法直接转为纯 SVG 的效果；如必须保留，提前在设计稿中栅格化为位图（再单独处理）或手动转为 SVG 等效代码（如
<filter>）
二、用 SVGO 进行自动化深度压缩
SVGO 是目前最成熟、可配置的 SVG 压缩工具，比在线压缩器更可控。推荐本地 CLI 方式使用（避免上传敏感图标）：
- 安装：
npm install -g svgo - 基础精简命令：
svgo input.svg -o output.svg --multipass（--multipass多轮优化更彻底） - 关键插件建议启用（写入
svgo.config.js）：-
removeViewBox: false（保留 viewBox，否则响应式失效） -
removeTitle: true（移除无用 title 标签，无障碍需 aria-label 替代） -
removeDesc: true（同理，desc 一般不参与渲染） -
cleanupIDs: true（删除无 JS 引用的 ID，或重命名成短 ID） -
convertShapeToPath: true（将<rect>/<circle>转为<path>，便于后续统一路径优化） -
collapseGroups: true（合并嵌套<g>，减少层级） -
removeEmptyAttrs: true（删掉fill="none"这类默认值属性） -
removeUnknownsAndDefaults: true（剔除无效属性和浏览器默认值）
-
三、手写级微调：SVG 内联到 HTML 前的终审
SVGO 后仍可人工精简 5%–15%，尤其适合高频复用的图标：
-
删掉
xmlns和xmlns:xlink：H5 中内联 SVG 时，这些命名空间在现代浏览器中非必需（HTML5 context 下自动识别） -
简化 path 指令：把
M 10 10 L 20 10 L 20 20 Z缩成M10 10h10v10H10Z（注意空格/逗号可省，字母大小写区分绝对/相对坐标） -
合并相同 fill/stroke 的相邻元素：用
<g fill="#333">...</g>包裹，而非每个<path>单独写 -
用 CSS 控制颜色和尺寸：删掉
width/height属性，改用style="width:24px;height:24px;"或 class；颜色统一用fill="currentColor"，由父级文字色继承 -
无障碍增强但不增体积：加
aria-hidden="true"（装饰性图标）或role="img" aria-label="搜索"，不引入额外标签
四、进阶：构建时集成与动态优化
对中大型项目，可将精简流程工程化：
- Webpack/Vite 插件：如
vite-plugin-svgr+svgo配置，自动导入 SVG 文件并返回优化后的 React 组件或字符串 - PostCSS 插件：用
postcss-inline-svg将 CSS 中的url("icon.svg")自动内联并压缩 - 服务端预处理：CI 流程中对
/src/assets/icons/批量运行 SVGO，生成icons.min.svg雪碧图或模块化文件 - 按需加载 + 缓存：用
<svg>内联替代<img src="x.svg">，规避 HTTP 请求，且支持 CSS/JS 动态控制
极致精简的本质是「只保留浏览器渲染和逻辑所需」，而不是追求字符数最少。每删一行都要验证显示是否一致、缩放是否正常、屏幕阅读器是否可读。不复杂但容易忽略。
