如何在HTML中引用外部SVG文件内的指定symbol符号

你之前的写法无法生效核心有三个原因：

• <img>标签加载SVG时，会将SVG作为独立隔离的静态图像处理，不支持通过URL锚点单独提取内部定义的<symbol>元素渲染，#svgView()片段仅能调整整个SVG画布的视口范围，无法定位到内部未直接渲染的symbol节点。而且你当前的SVG文件仅定义了symbol，没有在画布上直接绘制内容，用img加载只会得到空白。
• 你当前的SVG文件本身存在语法错误：末尾的SVG闭合标签错写为<svg>，且缺少SVG必须的XML命名空间声明，会导致浏览器无法正常解析资源。
• 你之前用的文件访问路径返回的是网页格式的代码预览内容，不是纯SVG原始资源，浏览器无法将其识别为SVG文件解析。

方案1：标准跨文档use引用（推荐，兼容所有现代浏览器） #

这是W3C标准的外部SVG符号引用方式，实现步骤如下：

1. 先修正你的SVG文件内容，补全命名空间、修正闭合标签，修正后内容如下：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
    <title>checkmark icon</title>
    <path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
</svg>

2. 将修正后的SVG文件上传到可直接返回纯SVG内容的静态资源路径，不要使用带网页预览的代码查看路径。
3. 在HTML中使用如下代码引用图标，可自行修改width、height属性控制图标大小，添加fill="currentColor"可让图标自动继承父元素的文字颜色：

<svg width="24" height="24" fill="currentColor">
  <use href="你的SVG静态资源路径#icon-checkmark" />
</svg>

注意：该方式要求SVG资源和HTML页面同域，或SVG资源所在服务器配置了允许跨域访问的CORS头，否则会被浏览器安全策略拦截。

方案2：预加载后引用（兼容老旧浏览器） #

如果需要兼容IE11等不支持跨文档use引用的老旧浏览器，可以先将SVG作为隐藏资源预加载到页面中，再通过id引用符号，同样不需要手动复制SVG内容到HTML代码中：

<!-- 放在页面body最开头，隐藏加载外部SVG资源 -->
<object data="你的SVG静态资源路径" width="0" height="0" style="position: absolute; left: -9999px;" aria-hidden="true"></object>

<!-- 页面任意位置引用图标 -->
<svg width="24" height="24" fill="currentColor">
  <use href="#icon-checkmark" />
</svg>

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