内联 SVG 是唯一支持真正交互的嵌入方式，必须直接写入 HTML 才能用 CSS 控制 path 颜色、绑定事件或 JS 动态修改 d 属性；需删内联样式、设 viewBox 与 width/height 配合、用 currentColor 统一配色。
内联 SVG 是唯一能真正交互的嵌入方式
想用 CSS 控制 <path> 颜色、绑定 click 事件、或用 JS 动态改 d 属性？只有把 SVG 代码直接写进 HTML 里才可行。<img src="icon.svg"> 看似省事，但内部元素完全不在当前 DOM 树中，document.querySelector("svg path") 必然返回 null。
常见错误现象：给 <img> 加了 class="icon" 后写 .icon:hover path { fill: red }，结果毫无反应——因为 path 根本不可选。
- 必须删掉导出 SVG 中所有子元素上的
fill、stroke等内联属性，否则 CSS 无法覆盖 -
<svg>标签本身要带viewBox（如viewBox="0 0 24 24"），否则缩放会失真 - 推荐用
width和height属性或 CSS 控制显示尺寸，别只靠 CSS 宽高——部分旧版 Safari 对svg { width: 100% }渲染异常
viewBox 不配 width/height 就等于没设
viewBox 定义的是逻辑坐标系，不是“画布大小”。它和 width/height 是一对配合参数：前者管比例，后者管占位。只写 viewBox="0 0 100 100" 而不设 width，浏览器可能渲染成 0×0；只设 width="100" height="50" 却不写 viewBox，图形会被横向拉伸、裁剪或模糊。
典型错误：Figma 导出的图标默认 viewBox="0 0 24 24"，但你硬写成 width="48" height="48" 却漏了 viewBox → 图形糊成一块。
立即学习“前端免费学习笔记（深入）”；
- 固定写法：
<svg width="24" height="24" viewBox="0 0 24 24"> - 响应式场景下，可只写
viewBox+ CSSwidth: 100%; height: auto;，让 SVG 按比例自适应容器 - IE11 和旧安卓 WebView 对
viewBox支持完好，但对<use>引用外部符号有兼容问题，内联时直接避开<use>
CSS 控制颜色得靠 currentColor 或显式 class
内联 SVG 的子元素（如 <path>）能被 CSS 选中，但前提是没被内联样式锁死。设计工具导出的 SVG 常带 fill="#333"，这时 svg path { fill: red } 无效——内联样式优先级高于普通 CSS 规则。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
最轻量的解法是删掉所有子元素的 fill/stroke，然后统一用 currentColor：
<svg class="icon" viewBox="0 0 24 24"> <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/> </svg>
再加一句 CSS：.icon { color: #007bff; } .icon path { fill: currentColor; }。这样换主题色只需改 color，不用动 SVG 结构。
- hover 效果直接写：
.icon:hover path { fill: #e74c3c; }，无需 JS - 避免用
!important强行覆盖内联 fill，维护成本高且易冲突 - 如果图标含多色区域（如红蓝两段路径），就别用
currentColor，改用明确 class 分别控制
JS 操作 SVG 元素和 Canvas 完全不是一回事
SVG 元素是标准 DOM 节点，document.getElementById("myCircle") 拿到的就是真实元素，调 setAttribute("r", "30") 会立刻重绘。这和 Canvas 的“先清空再重画”完全不同，也不需要 requestAnimationFrame 来保帧率（除非做高频动画）。
容易踩的坑：用 innerHTML 替换整个 <svg> 内容，会丢失已绑定的事件监听器；或者误用 getBoundingClientRect() 获取坐标——SVG 坐标系原点在左上角，且受 viewBox 缩放影响，需用 getScreenCTM() 转换。
- 动态更新路径：
pathEl.setAttribute("d", "M10 10 L50 50")，比 Canvas 逐点重绘更语义化 - 绑定事件建议用事件委托：
svgEl.addEventListener("click", e => { if (e.target.tagName === "PATH") { /* 处理点击 */ } }) - 数据可视化场景下，别手动拼
<rect>字符串，用document.createElementNS("http://www.w3.org/2000/svg", "rect")创建元素更安全
关键点其实就一个：内联 SVG 不是“插入图片”，而是“写一段可编程的 HTML”。viewBox、删内联样式、用 currentColor、当 DOM 操作——这些细节漏掉任何一环，交互就会卡在第一步。
