求助：从SVG Sprite导入的图标无法显示，求排查原因

核心问题原因 #

1. SVG容器无尺寸设置：页面中的<svg>标签未指定width、height或viewBox属性，即便成功加载外部Sprite里的symbol，容器也会默认缩为0×0的尺寸，导致图标不可见。
2. 本地file://协议的跨文件加载限制：直接双击打开index.html（使用file://协议）时，多数现代浏览器会限制跨文件的SVG引用，这是安全策略限制，导致外部sprites.svg无法被正确加载解析。

分步解决方案 #

方案1：修复SVG容器尺寸 + 使用本地服务器加载 #

1. 修改index.html中的<svg>标签，添加明确的尺寸和viewBox（与symbol的viewBox保持一致）：

<svg width="140" height="140" viewBox="0 0 140 140">
  <use href="sprites.svg#blue" />
</svg>

2. 启动本地静态文件服务器访问页面，规避file://协议限制：
   • Python 3用户：在文件所在目录执行命令 python -m http.server 8000，随后在浏览器访问 http://localhost:8000/index.html
   • Node.js用户：先全局安装http-server npm install -g http-server，再在目录执行 http-server，访问控制台给出的本地地址

方案2：内联SVG Sprite到HTML中 #

若不想依赖本地服务器，可将sprites.svg的内容内联到index.html的<head>中（设置display:none隐藏容器），避免跨文件加载问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>SVG Test</title>
    <!-- 内联SVG Sprite -->
    <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <symbol id="orange" viewBox="0 0 140 140">
          <path fill="orange" d="M70 0A70 70 0 1071 0Z"/>
        </symbol>
        <symbol id="blue" viewBox="0 0 140 140">
          <path fill="steelblue" d="M70 0A70 70 0 1071 0Z"/>
        </symbol>
      </defs>
    </svg>
</head>
<body>
    <svg width="140" height="140">
      <use href="#blue" />
    </svg>
</body>
</html>

补充说明 #

Firefox控制台显示的#shadow-root (closed)是<use>标签的正常行为——它会创建封闭的影子DOM来渲染引用内容，本身并非错误。图标不可见的本质是前面两个核心问题导致内容无法正确渲染或加载。

内容的提问来源于stack exchange，提问作者Slevin