最常见的原因是本地双击打开html文件（file://协议），浏览器收不到image/svg+xml mime类型响应，必须通过http服务访问；其他原因包括路径错误、服务器未配置mime类型、svg含xml声明或脚本。
用 <img> 引入 SVG 时为什么图标不显示
最常见的原因是本地双击打开 HTML 文件，而非通过 HTTP 服务访问。<img src="icon.svg"> 在本地文件系统（file:// 协议）下会失败，因为浏览器收不到 image/svg+xml MIME 类型响应。必须启动本地服务（如 Vite 的 vite preview、Python 的 python -m http.server，或确保 SVG 文件在 Webpack/Vite 的 public/ 目录下）。
其他高频原因包括：
-
src路径写错：相对路径以index.html所在目录为基准，比如 SVG 在assets/icons/check.svg，就该写src="assets/icons/check.svg" - 服务器未配置 MIME 类型：Nginx/Apache 需显式添加
image/svg+xml对应.svg后缀；Vite/Webpack 开发服务器默认支持，但生产部署常遗漏 - SVG 文件含 XML 声明或脚本：外部 SVG 应精简，删掉
<?xml version="1.0" encoding="UTF-8"?>和<script></script>，否则部分浏览器拒绝渲染
<img> 引入的 SVG 为什么改不了颜色
因为 <img> 加载的是封闭资源，和 logo.png 没区别——DOM 中只存在一个 <img> 元素，内部的 <path></path>、<circle></circle> 根本不在当前文档树里。所有“穿透式”操作都无效：
- CSS 写
img.icon path { fill: red; }→ 完全不生效 - JS 写
document.getElementById("arrow")→ 返回null - 想 hover 变色？只能靠
filter: hue-rotate()或drop-shadow()模拟，不可靠且失真
真正可控的变色方式只有两种：fill="currentColor"（需 SVG 源文件里提前写好），然后靠父级文本色驱动；或直接放弃 <img>，改用内联 SVG。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
什么时候该坚持用 <img> 引入 SVG
不是“能不能”，而是“值不值得换方案”。<img> 的优势非常具体，只在以下场景成立：
- 纯装饰性图标：分隔线、loading 动画、页脚 logo，无交互、不变色、不需 SEO 语义
- 高复用静态资源：同一 SVG 被引用 20+ 次，
<img>可被浏览器缓存，而内联会重复插入 20 次代码 - 构建流程受限：无法修改源 SVG（如设计交付物固定）、不能往 HTML 里塞大段 XML、或团队禁止内联第三方图标
- 需要 fallback 到 PNG：配合
<picture></picture>+<source type="image/svg+xml"></source>，但注意 Safari 对<picture></picture>的 SVG 支持不稳定，实际更常用<object></object>
只要需求里出现“悬停变色”“点击高亮”“动画路径”“屏幕阅读器读出内部文字”，<img> 就该立刻被排除。
如何让 <img> 引入的 SVG 更可靠
最小成本提升可用性，关键在三处控制：
- 显式设置宽高：
<img src="icon.svg" style="max-width:90%" style="max-width:90%" alt="搜索">，避免因 SVG 自带width/height属性导致 CSSmax-width失效 - 加
loading="lazy"：尤其列表中多个 SVG 图标，防阻塞首屏 - 避免依赖内部样式：不要指望 SVG 文件里的
fill="#333"能被外部覆盖；如需主题适配，SVG 源文件必须用fill="currentColor"，再由父容器控制color - 检查响应头：用浏览器 DevTools 的 Network 面板确认请求返回的
Content-Type确实是image/svg+xml，不是text/plain或application/octet-stream
最易被忽略的一点：图标语义越强，<img> 越危险。比如“已通过审核”图标里含 <text>通过</text>，用 <img> 只能靠 alt="已通过审核" 整体描述，而内联 SVG 的 <text></text> 可被屏幕阅读器逐字朗读——这点无障碍要求，<img> 天然做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
