SVG图标不显示的主因是引用方式错误，需确保SVG Sprite文件可访问且结构规范，内联或构建工具注入才能使生效，外部URL引用在现代浏览器中大多失效。
SVG图标不显示，常见原因是引用方式或路径问题，尤其是用 <link> 引入 SVG Sprite 时容易出错。关键不是“加了 link 就能用”，而是要确保 HTML、CSS 和 SVG Sprite 文件三者协同正确。
确认 SVG Sprite 文件可访问且结构规范
SVG Sprite 是一个包含多个 <symbol></symbol> 的 SVG 文件，每个 symbol 需有唯一 id，例如：
确保该文件（如 icons.svg）能通过浏览器直接访问（比如打开 http://localhost/icons.svg 可看到空白页但无报错），且服务器允许跨域或同源加载（避免 CORS 阻止内联引用）。
link 引用仅是“预加载”，不能直接用
很多人误以为写上：
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
就能在页面里写 <use href="icons.svg#icon-home"></use> —— 这在多数现代浏览器中不生效（尤其 Chrome 90+ 默认禁用外部 SVG fragment 引用）。link 只是提示浏览器提前获取资源，不会注入 DOM 或建立引用上下文。
真正可用的方式只有两种：
-
内联 SVG Sprite：把整个 icons.svg 内容复制进 HTML 的
或（常放在底部，display:none），之后<use href="#icon-home"></use>才有效； -
HTTP 服务端内联或构建时注入：用 Webpack/Vite 插件（如
vite-plugin-svg-icons）或后端模板自动把 sprite 注入页面。
CSS 中用 background-image 引用 SVG 图标需 Base64 或内联 data URL
如果想用 CSS 类（如 .icon-home { background-image: url(...); }）显示图标，注意：
- 直接写
url(icons.svg#icon-home)是无效的 —— CSS background 不支持 fragment 标识符； - 可行做法是：将单个 icon 导出为独立 SVG 文件（如
home.svg），再url("home.svg")； - 或转成 data URL：
url("data:image/svg+xml,%3Csvg...%3E")，适合少量图标； - 也可用 CSS mask + background-color 实现单色图标复用（需配合 viewBox 和透明填充）。
检查控制台与网络面板定位具体问题
打开浏览器开发者工具：
- Network 面板看
icons.svg是否 200 加载成功，有没有 404 或 MIME 类型错误（应为image/svg+xml）； - Console 看是否有 “Blocked loading resource from cross-origin” 或 “Failed to execute 'use' on 'SVGSVGElement'”；
- Elements 面板检查
<use></use>元素是否渲染，href属性值是否拼写正确（大小写、#号、id 是否匹配）； - 尝试临时改用绝对路径或本地 file:// 测试，排除路径解析问题。
基本上就这些。SVG Sprite 本身很轻量，但引用链稍脆弱。优先选内联方案，稳定可控；若必须外部引用，建议用构建工具自动化处理，别手动拼 link + use。
