内联svg是表格中图标唯一兼顾缩放、暗黑模式、hover变色和无障碍的方式；必须带viewbox和currentcolor，删内联样式，用em单位控制尺寸，优先svg sprite复用。
直接在 <td> 或 <code><th> 里内联 SVG 是唯一能保证图标随文字缩放、响应暗黑模式、支持 hover 变色且无障碍友好的方式；用 <code><img> 或 CSS background 会丢失语义、无法变色、hover 失效。
内联 SVG 必须带 viewBox 和 currentColor
表格单元格里的 SVG 不是“贴个图”，而是要和文字对齐、继承颜色、随 font-size 缩放。漏掉关键属性就会错位或变灰。
-
viewBox必须存在，且值要匹配原始设计（如 Figma 导出默认是"0 0 24 24"），否则图标会拉伸、裁剪或只显示一角 -
fill="currentColor"要写在<path></path>或<svg></svg>的子元素上，不能只靠 CSS —— 否则 Safari 或旧 WebView 下 color 继承失败 - 删掉导出 SVG 中所有
fill="#000"、stroke="red"这类内联样式，它们会阻止 CSS 覆盖 - 加
display: block或vertical-align: middle到<svg></svg>，避免底部留白导致单元格高度异常
表格中 SVG 尺寸控制：别只靠 width/height 属性
在 <td> 里硬写 <code>width="16" height="16" 容易和文字行高冲突，尤其在响应式表格中。
- 推荐用 CSS 控制：
.icon { width: 1.2em; height: 1.2em; }—— em 单位让图标随font-size等比缩放 -
<svg></svg>标签本身不写width/height属性，只保留viewBox，由 CSS 全权接管尺寸 - 如果表格用了
table-layout: fixed，需给<td> 设最小宽度，否则小图标可能被压缩变形 <li>避免用 <code>transform: scale()模拟缩放 —— 会模糊、影响点击热区、破坏 baseline 对齐 - 正确写法：
<td><svg class="status-icon"><path d="..." fill="currentColor"></path></svg></td> - CSS 写：
.status-icon { color: #666; } tr:hover .status-icon { color: #007bff; } .selected .status-icon { color: #28a745; } - 不要用
svg:hover path—— 这样写会干扰表格行 hover 整体效果，应把状态委托给父容器 - 若需 JS 动态切换状态（如点击切换勾选），直接改
<svg></svg>的 class，别操作fill属性 —— 更易维护、兼容性更好 - 把图标合并到单个
icons.svg文件，每个用<symbol id="edit"></symbol>定义 - 在 HTML 底部一次性加载：
<div style="position: absolute; width: 0; height: 0;"><svg><use href="icons.svg#edit"></use></svg></div> - 单元格里用：
<svg class="icon"><use href="icons.svg#edit"></use></svg> - 注意：
href必须同域，且icons.svg里所有<symbol></symbol>的viewBox要一致（如全为"0 0 24 24"），否则缩放错乱 - IE11 不支持
<use href="xxx.svg#id"></use>，如需兼容，退回到内联或用构建工具 inline 所有 symbol
hover 变色和状态联动必须用内联 + CSS
想让表格行悬停时图标变蓝、选中时变绿？<img src="check.svg"> 方案完全做不到，连 :hover 都无法穿透。
多图标复用场景优先用 SVG Sprite（同域）
一个表格每行都有「编辑」「删除」「复制」三个图标，全内联会重复大量代码，但又不能用 <img>——因为要变色。
真正麻烦的不是怎么插进去，而是插完之后要不要支持主题切换、屏幕阅读器播报、键盘焦点、以及未来某天设计师突然改了图标配色——这些都只在内联 SVG + currentColor + 正确 viewBox 的组合下才可控。其他方式省下的那几行代码，后期都会十倍返还成 hack 和 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
