完全可行，SVG是标准HTML元素，可直接写入<td>；需设width/height和viewBox防变形，用vertical-align对齐，并清理冗余属性以确保兼容性。
直接在 <td> 里写 <svg> 标签可行吗？
完全可行，而且是最简单、最可控的方式。SVG 是标准 HTML 元素，浏览器原生支持，不需要额外加载或转换。只要确保 SVG 内容是合法的 XML 片段（比如闭合标签、不带 <?xml> 声明、不包含 <script> 或外部引用），就能直接塞进 <td>。
常见错误现象：SVG 不显示，或者只显示左上角一小块——多半是没设 width/height，或用了相对单位（如 %）但父容器没尺寸；也可能是 viewBox 和尺寸不匹配，导致内容被裁切。
-
<svg>必须有明确的width和height（建议用px或em，避免纯%） - 优先用
viewBox控制缩放逻辑，例如viewBox="0 0 100 100"+width="24" height="24"可等比缩放图标 - 避免在
<svg>内写<style>或内联class，除非你确认 CSS 作用域不会冲突 - 如果 SVG 来自设计工具导出，先手动删掉冗余
xmlns、xml:space等属性，保留最小可用结构
<img src="icon.svg"> 跟内联 <svg> 有什么实际区别？
核心区别在于控制粒度和运行时行为：内联 <svg> 可被 CSS 修改颜色、响应式调整、JS 动态操作节点；而 <img> 是黑盒，只能整体替换或加滤镜。
使用场景判断：如果图标要随文字变色（比如用 fill: currentColor）、需要 hover 动画、或同一图标在不同行要差异化渲染（比如状态色不同），必须用内联；如果只是静态装饰性图标、数量多且重复（如 100 行数据每行一个“下载”图标），用 <img> 更轻量、可缓存、利于复用。
立即学习“前端免费学习笔记（深入）”；
- 内联 SVG 的
fill、stroke可继承父级文字颜色，<img>不行 - 内联 SVG 在打印时更可靠（
<img>有时因 CORS 或路径问题失效） - 内联 SVG 会增加 HTML 体积，尤其图标复杂时；
<img>支持压缩和 CDN 缓存 - 某些旧版 IE（如 IE11）对内联 SVG 的
flex对齐支持不稳定，<img>更稳
表格中多个 SVG 图标对齐不齐怎么办？
根本原因是 SVG 默认 display: inline，受字体基线影响，容易上下错位。不是 SVG 本身有问题，而是它被当作文本字符处理了。
最简解法是统一设置 vertical-align，配合 line-height 和容器高度约束：
- 给
<td>加line-height: 1和height: 24px（或你期望的行高） - 给
<svg>加vertical-align: middle或vertical-align: top - 避免用
margin或padding微调，那会破坏表格单元格默认盒模型 - 如果图标需居中且占满单元格，可给
<td>加text-align: center+vertical-align: middle，再配 SVG 尺寸
示例：
<td style="height: 24px; line-height: 1;"><svg width="16" height="16" viewBox="0 0 16 16" style="vertical-align: middle"><circle cx="8" cy="8" r="4" fill="currentColor"/></svg></td>
动态生成表格时插入 SVG，要注意哪些坑？
关键在字符串拼接安全性和 DOM 注入时机。直接用 innerHTML += 插入含 SVG 的字符串，若 SVG 内容来自用户输入或 API，可能触发 XSS（比如含 <script> 或 onload 属性）；用 createElement + setAttribute 又太繁琐。
- 服务端返回的 SVG 字符串，务必做 HTML 实体转义（如
替换 <code><），或走模板引擎的自动转义机制 - 前端 JS 拼接时，推荐用
DOMParser解析 SVG 字符串再appendChild，避免innerHTML直接执行脚本 - 不要在 SVG 中写
id属性（如<path id="arrow">），多个重复id会让document.getElementById失效 - React/Vue 等框架中，用 JSX/模板语法写内联 SVG 即可，但注意属性名（如
className替代class，fillRule替代fill-rule）
复杂点往往不在 SVG 本身，而在它混在表格结构里时，被样式重置、被表格自动换行截断、或被无障碍工具误读为装饰性内容——需要显式加 role="img" 和 aria-label。
