用途：审查图片资源、标记与构建/CDN 转换中与内联 SVG 体积和复杂度相关的问题，判断格式选择、尺寸和加载行为是否合理。
主要能力：扫描 HTML 和 React/Vue 组件中的内联 svg 元素；统计字符数，标记超过约 1KB 的 SVG；检查是否在多处复用（应改为组件或 sprite）；检查是否经过 SVGO 优化（冗余属性、可用 CSS 类替代的内联样式、编辑器注释）；判断是否真的需要内联以支持 CSS 样式或动画，还是用 img 即可。
处理方式：大型非交互 SVG 抽成 .svg 文件并用 img 引用；复用图标改为 SVG sprite 或 React 组件；需要 CSS 悬停/动画的保留内联但先跑 SVGO，移除编辑器残留、合并路径、删除冗余属性；React 项目可用 SVGR 将 SVG 作为组件导入以便 tree-shaking；并给出前后体积对比。
适用场景：图标系统、来自 Figma 的复杂插图、框架组件的图像资源审查与代码评审。
限制与原则：仅当需要对单个路径做 CSS 悬停/动画或 JS 动画时才内联；静态 SVG 放在 img 标签或 CSS background 中；复用图标用 sprite 或框架组件，不要多处复制内联；内联 SVG 建议控制在 1KB 以下（理想 500 字节以内），并在内联前统一跑 SVGO。外部 SVG 文件和 img 元素不支持对路径的 CSS/JS 交互。完整实现细节、代码示例和框架专属指南见 references/rule.md，规则页为 https://frontendchecklist.io/en/rules/images/svg-inline。