内联 SVG 是唯一能真正控制样式和交互的方式；img 将 SVG 当作位图处理，DOM 不可见，CSS/JS 无法作用于内部元素；object 和 iframe 存在 DOM 隔离，跨域受限且无法直接继承父级样式；必须设置 viewBox 实现响应式缩放；fill="currentColor" 是实现主题色统一的关键，需避免内联 fill 覆盖 CSS。
内联 SVG 是唯一能真正控制样式和交互的方式；其他方式（img、object、iframe）都存在不同程度的 DOM 隔离或样式穿透限制。
为什么 img 标签嵌入 SVG 无法改颜色或绑定事件
浏览器把 img src="icon.svg" 当作一个不透明的位图资源处理，SVG 内部结构完全不可见。DOM 树里只有 <img> 节点，没有 <path>、<circle> 等子元素。
- 执行
document.querySelector("svg path")返回null，因为根本不存在svg元素 -
.icon:hover path { fill: red }不生效——CSS 选不到路径节点 - 服务器未返回正确的
image/svg+xmlMIME 类型时，本地双击打开 HTML 文件会直接下载 SVG，而不是渲染 - 适合场景：纯静态图标、装饰性图形、SEO 不敏感的 banner 图
object 和 iframe 的 DOM 隔离问题
两者都会创建独立的文档上下文，虽然比 img 多一层可访问性，但依然无法用父页面 CSS 直接控制内部图形，JS 交互也受限。
-
object可通过contentDocument访问子文档，但跨域时被阻止；IE11 对 SVG 中的<use>支持不稳定 -
iframe默认完全隔离，连title属性都要显式设置才对屏幕阅读器友好 - 两者都可能触发两次请求（一次预检、一次加载），且无法利用 CSS 变量或
currentColor统一配色 - 适合场景：嵌入第三方图表（如 D3 生成的独立 SVG）、需脚本沙箱的可信内容
内联 SVG 必须设 viewBox，否则缩放会失真
viewBox 不是可选项，它是 SVG 响应式缩放的数学基础。只写 width/height 而不设 viewBox，等于让浏览器“猜比例”。
立即学习“前端免费学习笔记（深入）”；
-
viewBox="0 0 24 24"定义了逻辑坐标系，所有cx、d指令都基于这个单位系统 - 漏掉
viewBox时，Chrome 可能勉强渲染，但 Safari 或旧安卓 WebView 会显示空白或裁剪 - 错误写法：
<svg width="48" height="48"><circle cx="24" cy="24" r="12"></circle></svg>→ 图形糊成一团 - 正确写法：
<svg width="48" height="48" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"></circle></svg> - 响应式建议：
<svg viewBox="0 0 24 24" style="width: 100%; height: auto;">，再配合fill="currentColor"
内联 SVG 中 fill="currentColor" 是主题色控制的关键
SVG 元素默认不继承文字颜色，fill 和 stroke 初始值都是 black。硬编码颜色（如 fill="#333"）会让 CSS 主题切换失效。
- 设计工具导出的 SVG 常带内联
fill，必须手动删掉，否则svg path { fill: red }无效（内联样式优先级更高） - 推荐结构：
<svg class="icon" viewBox="0 0 24 24"><path d="..." fill="currentColor"/></svg>，再加.icon { color: #007bff; } -
:hover动画可直接写：.icon:hover { color: #e74c3c; }，路径自动变色 - 避免在 SVG 内写
style="fill:#333"，调试时很难定位样式来源
最容易被忽略的是：内联 SVG 的 xmlns="http://www.w3.org/2000/svg" 在现代浏览器中虽常可省略，但在严格 XML 解析环境（如 XHTML、某些构建工具预处理）下缺失会导致整个 SVG 不渲染。别依赖容错，写全更稳妥。
