<img>标签加载外部SVG常失败，主因是本地双击打开时MIME类型缺失、服务器未配置image/svg+xml、路径错误；需HTTP服务、正确路径及MIME配置；交互或样式控制必须用内联或<object>。
外部 SVG 文件不能用 <img> 标签随意加载就完事——路径、MIME 类型、交互需求，三者缺一都会出问题。
为什么 <img src="icon.svg"> 有时不显示
最常见原因是本地双击打开 HTML 文件（file:// 协议），此时浏览器拒绝解析 SVG 的 image/svg+xml MIME 类型，直接空白。服务器没配对 MIME 类型也会导致同源请求失败（尤其 Nginx/Apache 默认不识别 .svg）。
- 必须走 HTTP/HTTPS 服务（如
localhost:3000或部署后域名），不能双击打开 HTML - Nginx 需加配置：
types { image/svg+xml svg svgz; }；Apache 加AddType image/svg+xml .svg - 路径写错（比如漏掉
./或拼错文件名）、大小写不一致（Linux 服务器敏感）也常被忽略
<object> 和 <iframe> 的实际差异在哪
<object data="chart.svg" type="image/svg+xml"> 能 fallback（比如写个 Your browser doesn’t support SVG），且 SVG 内部脚本可执行、CSS 可继承父页样式（有限）；<iframe src="chart.svg"> 则完全隔离上下文——父页 CSS 不影响它，它的 JS 也无法访问父页 DOM，但能避免样式污染。
- 需要降级提示或希望 SVG 内部能响应父页事件（如主题色变更触发重绘），选
<object> - 嵌入第三方 SVG（比如仪表盘图表），怕样式冲突或需严格沙箱，用
<iframe> - 两者都支持
width/height属性，但<iframe>默认有边框，需style="border: none"
想改颜色或加 hover 效果？别用 <img>
<img> 把 SVG 当作位图处理，DOM 里只存在一个 <img> 元素，内部 <path>、<circle> 完全不可见、不可选中、不可样式化。哪怕你给 <img> 加了 class，也改不了里面 fill 或 stroke。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 要动态着色（比如图标随主题切换）、添加点击反馈、做 SVG 动画，必须用内联或
<object> - 如果 SVG 是纯装饰（如背景花纹、分隔线），且确定永不交互，
<img>最轻量、缓存友好 - CSS background-image 方式同样无法操作内部元素，且 URL 编码易出错（
%3csvg%3e漏一个字符就失效）
SVG Sprite 是什么，现在还值得用吗
把多个 SVG 图标合并进单个 sprite.svg 文件，再用 <use href="#icon-home"> 引用，曾是减少 HTTP 请求的主流方案。但现在 HTTP/2 多路复用 + 浏览器强缓存下，优势已不明显，反而增加维护成本。
- 仅当项目仍需兼容 HTTP/1.1 且图标数量 > 20 个时，才考虑 Sprite
- 现代项目更推荐：小图标直接内联（
<svg>...</svg>），大图表用<object>或懒加载 - 注意：
<use>在<object>中跨域受限，且 Safari 对外部 sprite 支持不稳定
真正麻烦的不是怎么引入，而是引入后才发现 SVG 原文件里带 <style> 标签或内联 fill，和你的 CSS 冲突；或者 viewBox 缺失导致缩放异常——这些细节，比选择标签类型更早卡住人。
