内联SVG必须用<svg>标签包裹并保留viewBox，否则无法缩放适配；<img>引入的SVG是黑盒，不支持CSS控制fill/stroke或JS操作内部元素，而内联SVG作为DOM节点可完全交互与样式化。
SVG 代码直接嵌入 HTML 文档是当前最主流、最可控的方式，但必须满足几个硬性规范，否则图形不渲染、样式失效或交互失灵。
内联 SVG 必须有正确的命名空间和根 svg 元素
浏览器只识别以 <svg> 开头的合法 SVG 片段，且需声明 XML 命名空间（HTML5 中可省略，但建议保留）。
-
xmlns="http://www.w3.org/2000/svg"是必需的命名空间声明，尤其在 XHTML 或旧版 IE 兼容场景下不能省；HTML5 中虽可省略，但保留更稳妥 -
<svg>必须作为直接子元素出现在<body>（或合法容器如<div>）中，不能套在<p>、<span>等内联元素里 - 常见错误：
<div><svg>...</svg></div>没问题，但<p><svg>...</svg></p>可能被解析器截断或忽略
viewBox 比 width/height 更关键
仅设 width 和 height 容易导致拉伸变形或比例错乱；viewBox 才真正定义坐标系和缩放行为。
-
viewBox="0 0 100 100"表示内容逻辑尺寸为 100×100 单位，无论外部容器多大，内部图形都按此比例缩放 - 推荐写法：
<svg viewBox="0 0 100 100" width="100%" height="auto">，兼顾响应式与比例稳定 - 若省略
viewBox，又没设width/height，SVG 默认渲染为 300×150 像素，常导致小图标糊成一团
内联 SVG 中的 CSS 和 JS 作用域受 HTML 上下文直接影响
内联 SVG 不是独立文档，它的样式和脚本完全融入页面 DOM，这点和 <object> 或 <iframe> 截然不同。
立即学习“前端免费学习笔记（深入）”；
- CSS 选择器可直接命中
<circle>、<path>等子元素，例如svg circle:hover { fill: blue; } - JS 获取元素用
document.querySelector('svg circle')，而非contentDocument—— 后者只适用于<object>或<iframe> - 容易踩坑：外部 CSS 的
max-width: 100%会限制 SVG 宽度，但若 SVG 内部用了固定px值（如font-size="12"），缩放后文字可能模糊
服务端 MIME 类型不影响内联 SVG，但影响文件引用方式
如果你把 SVG 代码复制粘贴进 HTML，服务器返回什么 MIME 类型都无关紧要；但一旦你改用 <img src="icon.svg"> 或 <object data="chart.svg">，就绕不开服务器配置。
- 内联 SVG：纯 HTML 解析，不发请求，
Content-Type完全不生效 -
<img>引用 SVG：浏览器当作图片处理，不要求image/svg+xml，但部分 CDN 或老旧 Nginx 配置会返回text/plain导致加载失败 -
<object>或<iframe>：必须返回Content-Type: image/svg+xml，否则 Chrome/Firefox 拒绝执行脚本、禁用 DOM 访问
真正麻烦的不是“怎么塞进去”，而是“塞进去之后它是否还在你掌控之中”——内联 SVG 看似简单，但 viewBox 缺失、命名空间遗漏、CSS 选择器越界、JS 作用域误判，这四类问题占了线上 SVG 渲染异常的八成以上。
