内联 SVG 必须包裹在语义化容器中，按用途选用 span（带 role/aria-label）、figure（含 figcaption）等；必须设置 viewBox，禁用硬编码宽高；颜色统一用 currentColor；复用图标用 symbol+use，symbol 需置于 body 开头。
内联 SVG 必须包裹在语义化容器里，不能裸放 <svg>
直接把 <svg> 塞进 <div> 或丢在段落中间，等于放弃语义——屏幕阅读器读不出它是什么，搜索引擎无法理解其意图，CSS 也难做上下文感知的样式隔离。
正确做法是按用途选容器：
- 图标类（如按钮里的“搜索”、“关闭”）：用
<span role="img" aria-label="搜索"></span>包裹<svg>，aria-label提供可访问文本，role="img"明确类型 - 装饰性图标（无信息量，仅视觉点缀）：用
<span aria-hidden="true"></span>，并给<svg>加focusable="false"和aria-hidden="true" - 图表或数据可视化：必须用
<figure>+<figcaption>，且<figcaption>不能为空，需描述核心趋势或数值 - 导航图标（如面包屑中的箭头）：放在
<nav>内，<svg>自身不加alt，靠父级<nav aria-label="面包屑导航">统一声明
<svg> 标签自身必须带 viewBox，且禁用硬编码 width/height 属性
漏写 viewBox 是最常见错误。只写 width="24" height="24" 会导致图形拉伸、模糊，尤其在高 DPR 设备上；只写 viewBox="0 0 24 24" 不设尺寸，则浏览器可能渲染为 300×150 或坍缩为 0×0。
响应式场景下，推荐写法：
立即学习“前端免费学习笔记（深入）”；
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg>
再通过 CSS 控制尺寸：svg { width: 1.5em; height: 1.5em; } —— 这样图标会随字体大小缩放，且保持比例。
禁止写：<svg width="24px" height="24px" viewBox="0 0 24 24">，px 单位会锁死尺寸，破坏响应性。
颜色必须用 currentColor，删掉所有子元素上的 fill、stroke 内联属性
设计工具导出的 SVG 常带 fill="#333"，这会让外部 CSS 的 .icon path { fill: currentColor } 完全失效——不是优先级问题，而是内联样式在层叠中天然高于外部规则。
实操步骤：
- 手动删除所有
<path>、<circle>、<rect>上的fill、stroke、stroke-width属性 - 保留
<svg>根标签的xmlns和viewBox - 统一用 CSS 控制：
.icon { color: #007bff; }+.icon path { fill: currentColor; } - 若需多色图标（如状态图标红/绿），改用 class 切换：
.icon--error path:nth-child(1) { fill: #dc3545; }
复用图标必须用 <symbol> + <use>，但 <symbol> 要放在 <body> 开头
<symbol> 是模板，本身不渲染，所以可以集中放在 <body> 最上方（紧贴 <body> 开始处），不影响首屏渲染，还能被任意位置的 <use> 引用。
关键约束：
-
<symbol>必须有id，且全局唯一；<use>的href必须带#前缀，如<use href="#icon-home"></use> -
<use>不继承外部fill，必须显式写fill="currentColor"或靠父级color透传 - IE11 及更旧浏览器不支持
<use>，需 fallback：<svg class="icon"><use href="#icon-home"></use></svg><noscript><img src="icon-home.svg" alt=""></noscript>
容易被忽略的是：如果 <symbol> 放在 <footer> 或某个组件内部，<use> 在页面顶部引用时会失败——DOM 解析顺序决定可用性，不是“写了就能用”。
