SVG 图形开发完整指南
核心用法
本文档提供了一套生产级的 SVG 开发规范，涵盖从基础绘制到性能优化的完整链路：
1. 响应式基础——viewBox 配置
viewBox定义内部坐标系，必须与width/height解耦以实现缩放- 典型错误：缺少 viewBox 导致固定尺寸、坐标超出可视区域
2. 无障碍访问策略
- 信息型 SVG：使用
role="img"+aria-labelledby+<title>/<desc> - 装饰型 SVG：设置
aria-hidden="true"和focusable="false" - 关键规则：
<title>必须是<svg>的第一个子元素
3. CSS 样式控制
currentColor实现主题色继承- CSS 自定义属性支持多色图标
- 重大限制：
<img>和background-image方式无法样式化
4. SVGO 优化配置
- 必须禁用：
removeViewBox、removeTitle、removeDesc - 条件禁用：
cleanupIds（存在 CSS/JS 引用时） - 典型压缩率：50-80%
5. 嵌入方式对比
| 方式 | CSS 样式 | 缓存 | 适用场景 |
|------|----------|------|----------|
| Inline `<svg>` | ✅ 完整 | ❌ 无 | 动态交互、动画 |
| `<img src>` | ❌ 无 | ✅ 有 | 静态展示 |
| Symbol sprite `<use>` | ⚠️ 部分 | ✅ 有 | 图标系统 |
| CSS background | ❌ 无 | ✅ 有 | 装饰图案 |
显著优点
- 权威性高：基于 W3C 规范和主流浏览器实现差异编写
- 实用性极强：包含可直接复制的代码片段和配置
- 性能数据支撑：提供 1000 图标基准测试数据
- 错误模式完整：列举 9 类常见生产事故及规避方案
潜在局限
- 未涉及 SMIL 动画（已被 Chrome 弃用）
- 未涵盖 SVG 滤镜高级效果
- 性能测试数据基于特定环境，实际结果因浏览器版本差异较大
适合人群
- 构建图标系统的前端工程师
- 需要优化设计稿导出资源的设计师
- 追求 Web Vitals 性能指标的开发者
常规风险
- ID 冲突：多页面内联 SVG 的 ID 命名空间污染
- IE/Edge 遗留问题：
focusable属性需显式处理 - SVGO 误配置：默认配置会移除 viewBox 和可访问性属性
- 跨域限制：外部 SVG 作为
<img>时受 CORS 约束