使用<use>标签渲染外部SVG文件失败，求助问题排查

你的问题出在两个核心点：

1. 外部SVG缺少可被引用的目标标识：<use>标签必须指向外部SVG中带id的元素，直接引用整个SVG文件路径不会生效，必须指定具体元素的ID。
2. 主SVG未设置尺寸：页面中的<svg>标签没有定义宽高，默认尺寸可能为0，导致即使引用成功也无法显示内容。

解决方法一：给外部SVG根元素添加ID #

修改icon.svg，给根<svg>标签加上id属性：

<svg id="app-icon" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16C0.5 17.1 1.4 18 2.5 18H16.5C17.6 18 18.5 17.1 18.5 16V2C18.5 0.9 17.6 0 16.5 0ZM2.5 16V2H8.5V16H2.5ZM16.5 16H10.5V9H16.5V16ZM16.5 7H10.5V2H16.5V7Z" fill="#9F9E99"/>
</svg>

然后修改svg.html中的<use>标签，指定引用的ID，同时给主<svg>设置宽高：

<html>
<head></head>
<body>
<svg width="19" height="18">  
  <use href="icon.svg#app-icon" />
</svg>
</body>
</html>

解决方法二：使用<symbol>封装可复用图形（推荐） #

更规范的做法是将可复用图形放到<symbol>标签中，外部SVG仅作为资源容器，本身不会显示：

修改icon.svg：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="app-icon" viewBox="0 0 19 18" fill="none">
    <path d="M16.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16C0.5 17.1 1.4 18 2.5 18H16.5C17.6 18 18.5 17.1 18.5 16V2C18.5 0.9 17.6 0 16.5 0ZM2.5 16V2H8.5V16H2.5ZM16.5 16H10.5V9H16.5V16ZM16.5 7H10.5V2H16.5V7Z" fill="#9F9E99"/>
  </symbol>
</svg>

svg.html的修改和方法一一致：

<html>
<head></head>
<body>
<svg width="19" height="18">  
  <use href="icon.svg#app-icon" />
</svg>
</body>
</html>

额外提示：如果本地用file://协议打开页面，部分浏览器可能因跨域限制阻止引用外部SVG，此时可以通过本地服务器（比如npx serve）运行项目，即可正常显示。

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