内联svg最简单可控，直接写标签即可；需设viewbox与width/height配合防失真，删子元素fill/stroke属性才能用css控制颜色和hover。
直接写 <svg></svg> 标签就能用，不用额外加载
SVG 是原生 HTML 元素，浏览器直接解析渲染，只要把 <svg></svg> 块写进 HTML 源码里，它就会立刻显示——不需要 JS 初始化、不依赖外部文件、也不用 base64 编码。常见误区是以为要像图片一样用 <img src="...svg"> 引入，其实那会丢失内联样式和交互能力。
典型结构如下：
<svg width="200" height="100" viewbox="0 0 200 100"><rect x="10" y="10" width="80" height="40" fill="#3498db"></rect><circle cx="150" cy="30" r="20" fill="#e74c3c"></circle></svg>
-
viewBox是关键：它定义坐标系范围，让 SVG 自适应容器尺寸；漏写会导致图形缩放异常或裁剪 -
width/height控制显示大小，但若只设其一（如只设width="100%"），需确保父容器有明确宽高，否则可能塌陷 - 所有图形元素（
<rect></rect>、<path></path>、<text></text>等）必须放在<svg></svg>内部，不能单独存在
用 <path></path> 画复杂图形时，d 属性语法要手写准确
图标、曲线、不规则形状基本靠 <path d="..."></path> 实现。d 是一串指令字符串，比如 M10 10 L50 10 L50 50 Z 表示矩形路径。出错时浏览器不会报错，只会空白或显示错位图形。
- 大小写敏感：
m（相对移动）和M（绝对移动）行为完全不同 - 空格和逗号可互换，但不能混用混乱，例如
M10,10L50,10合法，M10,10 L50,10也合法，但M10,10L 50,10中间多一个空格可能被某些解析器截断 - 调试建议：先用 Figma / Illustrator 导出 SVG，复制
<path d="..."></path>片段，再微调；不要从零手写贝塞尔曲线命令
内联 SVG 支持 CSS 控制和 JS 交互，但选择器要注意作用域
你可以用 CSS 给 <svg></svg> 里的 <circle></circle> 加 hover 效果，也能用 JS 获取并修改 fill 属性。但别直接对 <svg></svg> 元素用 document.getElementById() 后调 .style.fill —— 它没有 fill 这个样式属性，得操作子元素。
- CSS 中，
svg rect:hover { fill: red; }有效，但svg:hover rect { ... }可能不触发，因为<svg></svg>默认pointer-events: none，需显式加style="pointer-events: auto" - JS 修改颜色优先用
element.setAttribute('fill', 'blue')，而非element.style.fill，因为 SVG 属性不完全映射到 CSS 样式表 - 如果 SVG 被包裹在 Shadow DOM 或 iframe 里，常规
querySelector就找不到内部元素了
导出 SVG 时注意清理冗余代码，否则体积和兼容性都受影响
设计工具导出的 SVG 常带无用 <defs></defs>、<metadata></metadata>、编辑器 ID、注释，甚至 xmlns 命名空间声明——在纯 HTML 内联场景下，这些多数是累赘。
- 删掉
xmlns="http://www.w3.org/2000/svg"：HTML5 文档中<svg></svg>已默认该命名空间，保留反而可能干扰某些旧版 Safari - 避免
<g id="layer1"></g>这类无功能分组，除非你需要 JS 精确控制某组 - 颜色尽量用十六进制（
#333）而非rgb(51,51,51)或命名色（gray），后者在部分微信内置浏览器中有兼容问题
真正麻烦的不是怎么写，而是改完之后忘了清浏览器缓存看效果，或者在 Vue/React 的 JSX 里没转义 和 <code>> —— 那就变成纯文本显示了。
