svg的不显示主因是d属性书写错误或viewbox不匹配；d须严格遵循大小写（m绝对/m相对）、空格逗号规范，viewbox必须覆盖路径坐标范围且不可为0或负值。
内联 SVG 时 path 的 d 属性写错就完全不显示
SVG 中最灵活也最容易出错的绘图方式就是 <path></path>，它靠 d 属性的一串指令画图，大小写、空格、逗号、坐标顺序全错不得。
常见错误现象：<path d="M 10 10 L 90 90"></path> 看似正确，但实际可能因多余空格或单位缺失被某些解析器忽略；更典型的是把 M10,10L90,90 写成 M10 10 L90 90（空格分隔在部分旧引擎中不稳定）；或者混用大小写——m 是相对移动，M 是绝对坐标，一不小心图形就偏到视口外。
-
d值必须是连续字符串，推荐用逗号分隔坐标，如M10,10 L90,90 - 大写字母（
M,L,C,Z）表示绝对坐标；小写（m,l,c,z）是相对前一点的偏移，别混用 - 导出工具（如 Figma / Illustrator）常带冗余空格和换行，粘贴进 HTML 前建议压缩成单行并验证
- 调试技巧：先用
<rect x="0" y="0" width="100" height="100" fill="red"></rect>确认 SVG 容器是否渲染正常，再替换为path
viewBox 缺失或值错导致图标只显示一角或严重缩放失真
viewBox 不是可选项，它是内联 SVG 能响应式缩放、保持比例清晰的核心。没它，width 和 height 就只是强行拉伸容器，内部图形坐标会直接溢出或挤压。
常见错误现象：图标在 Chrome 看正常，IE 或 Safari 下只剩左上角一个小点；或者放大后边缘模糊、线条粗细不均。
-
viewBox格式固定为四个数字：viewBox="min-x min-y width height"，例如viewBox="0 0 24 24" - 这个范围必须匹配
path中所有坐标的逻辑边界——如果d="M10,10 L30,30"，但viewBox="0 0 24 24"，那L30,30就超出了视口，不显示 - 导出 SVG 时设计稿常用 100×100 或 1024×1024 画布，内联前务必检查并重设
viewBox，别直接复制 - 不要写
viewBox="0 0 0 0"或负值，浏览器会静默丢弃整个 SVG 元素
用 currentColor 控制颜色比硬编码 fill="#333" 更可靠
内联 SVG 的最大优势是可以用 CSS 控制样式，但默认情况下 fill 和 stroke 不继承父级文字色，写死颜色会导致暗色模式失效、主题切换卡顿、维护成本高。
常见错误现象：深色背景上图标突然变黑看不见；加了 color: var(--primary) 但 SVG 图标颜色纹丝不动。
- 显式写
fill="currentColor"到每个<path></path>、<circle></circle>上，才能真正跟随父级color变化 - 避免在 SVG 内联写
style="fill:#000"或fill="#000"，这会覆盖外部 CSS 规则，调试时极难定位 - 如果需要多色图标（比如红蓝双色），可用 CSS 自定义属性配合
fill: var(--icon-primary)，但需确保根元素已定义该变量 -
currentColor对stroke同样有效，描边图标也适用
直接复制设计稿 SVG 源码容易带入兼容性雷区
从 Sketch、Figma 或 AI 导出的 SVG 文件常含编辑器元数据、<defs></defs> 引用、xlink:href、嵌入字体或渐变 ID，这些在内联时要么无效，要么触发解析异常。
常见错误现象：图标加载后空白；控制台报 InvalidStateError；CSS hover 动画对 path 完全无反应。
- 删掉所有
<defs></defs>、<style></style>、<metadata></metadata>和注释块，只保留<svg></svg>和其直系子元素（<path></path>,<circle></circle>等） - 把
xlink:href="#someId"改成href="#someId"（SVG 2 规范已废弃xlink:前缀） - 检查是否有
overflow="hidden"—— 它会让缩放后图形被意外裁剪，尤其搭配viewBox时 - 导出时选 “精简 SVG” 或手动用 SVGOMG 压缩，再粘贴进 HTML
path，而是写对了却因为 viewBox 范围和设计稿不一致、或漏删 xlink:href 这类“隐形属性”，让图标在某个浏览器里彻底消失——这种问题往往要花半小时查控制台，才意识到是导出时多带了一行命名空间声明。
