<img>标签嵌入SVG时图标不显示或无法样式化，是因为浏览器将其视为封闭位图资源，内部结构完全隔离，既无法通过CSS控制fill/stroke等属性，也不能响应hover、click等事件，仅适用于纯静态展示场景。
用 <img> 标签嵌入 SVG 时为什么图标不显示或无法样式化
直接用 <img src="icon.svg"> 能加载 SVG，但后续没法用 CSS 控制颜色、大小（比如 fill 或 stroke），也不能响应鼠标事件。这是因为 <img> 把 SVG 当作位图处理，完全隔离了内部结构。
- 适用场景：仅需静态展示、无需交互或动态样式控制
- 优点：简单、支持懒加载（
loading="lazy"）、可设alt属性提升可访问性 - 缺点：SVG 内部元素不可选、不可用 CSS 修改
fill等属性、无法绑定 JS 事件 - 注意路径：确保
src路径正确，相对路径以 HTML 文件为基准，不是 CSS 文件
用 <object> 嵌入 SVG 后 JS 拿不到 contentDocument
<object data="logo.svg" type="image/svg+xml"></object> 是较老但兼容性好的方式，能保留 SVG 的 DOM 结构，但跨域或本地文件协议（file://）下常导致 object.contentDocument 为 null，JS 操作失败。
- 必须等
load事件触发后才能访问contentDocument，否则是null - 本地开发时 Chrome 对
file://协议禁用跨源访问，会报Blocked a frame with origin "null" from accessing a cross-origin frame - 建议只在同源 HTTP(S) 环境下使用；若需 JS 操作，优先考虑内联或
<iframe> - fallback 内容写在
<object>标签体内（如<p>SVG not supported</p>），会被渲染当降级方案
内联 SVG（inline SVG）为何修改 fill 无效
把 SVG 源码直接粘贴进 HTML（即 inline），是最灵活的方式，但常见问题：写了 style="fill: red" 或外部 CSS 选择器却没生效。
- SVG 元素上已有
fill属性（如<path fill="#000">）会优先于 CSS 的fill，需加!important或删掉行内属性 - CSS 选择器要写对层级，例如
svg .icon-path { fill: currentColor }，不能漏掉类名或标签名 - 避免用
fill="none"后再靠 CSS 填色——它会覆盖 CSS，应改为fill="currentColor"或直接删掉fill属性 - IE11 不支持
currentColor在 SVG 中继承，如需兼容，改用具体颜色值或 JS 动态赋值
用 <use> 引用外部 SVG Sprite 时图标不显示
通过 <svg><use href="icons.svg#home"></use></svg> 复用 SVG 图标，看似简洁，但实际容易白屏。
立即学习“前端免费学习笔记（深入）”；
- 外部 SVG 文件必须是同源的，且服务器需返回
Content-Type: image/svg+xml，否则 Firefox/Edge 可能拒绝解析 -
href值必须带哈希（如#home），且目标<symbol id="home">必须存在且在外部文件顶层（不能嵌套在<g>或其他容器里） - Chrome 新版本对跨域
<use>更严格，建议把 sprite 放在同一域名下，或改用内联<symbol>+<use> - 调试技巧：直接打开
icons.svgURL 看是否能正常渲染，再检查 Network 面板中该请求是否 200 且 MIME 类型正确
<img> 最轻量但功能受限；<object> 和 <use> 都有隐性兼容门槛。真正需要动态着色或交互时，别省那几行代码——把关键 SVG 内联进去，比折腾路径和 MIME 类型更省时间。 
