如何使用<use>标签正确显示SVG？解决WordPress下引用宽高为0不显示的问题

你遇到的元素宽高为0的异常，本质是踩了SVG标签的引用规则误区：
标签上设置的width/height属性，仅对被引用的无独立尺寸定义的内联元素（如、等）生效；如果直接把整个独立SVG文件作为引用源、不指定具体内部元素的id，被拉取的外部根

具体调整步骤 #

• 改造被引用的独立SVG文件结构
  给SVG内部需要复用的图形元素添加唯一id，不要直接引用整个SVG根节点。比如你现有的arrow.svg可以调整为带id分组的结构：

  <svg fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17" viewBox="0 0 153 91" xmlns="http://www.w3.org/2000/svg">
    <g id="arrow-icon">
      <path d="m18.898 45.191h115.04"/>
      <path d="m108.181 18.898 25.757 26.293-25.757 26.293"/>
    </g>
  </svg>
  

• 调整标签的引用路径
  原来直接指向SVG文件的href要修改为「文件路径#内部元素id」的格式，同时把宽高属性从挪到外层包裹的根

  <svg viewBox='0 0 153 91' width='30' height='18'>
    <use href='https://example.com/wp-content/uploads/2021/04/arrow.svg#arrow-icon'></use>
  </svg>
  

• 排查WordPress环境的额外拦截
  WordPress核心默认会对上传的SVG文件做安全过滤，可能会自动删除你写的id、xmlns等必要属性。调整后如果还是无法渲染，需要打开上传后的SVG链接，检查源码里的id="arrow-icon"、xmlns属性有没有被平台过滤丢失。

关于SVG内联在页面body中替代独立文件的方案 #

这种方式不仅完全可行，而且是目前规避这类引用异常兼容性最好、性能最优的选择。
具体操作方式：
在页面公共位置（比如主题的全局模板文件、footer区域）放一个不占布局空间的隐藏SVG容器，把所有需要复用的图标都定义在容器内部并设置唯一id：

<!-- 隐藏的全局SVG图标库，不会遮挡、占用页面布局空间 -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true">
  <defs>
    <g id="arrow-icon" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17">
      <path d="m18.898 45.191h115.04"/>
      <path d="m108.181 18.898 25.757 26.293-25.757 26.293"/>
    </g>
  </defs>
</svg>

之后在页面任意位置需要使用这个箭头图标时，只需要写极简的引用本地锚点即可：

<svg viewBox="0 0 153 91" width="30" height="18">
  <use href="#arrow-icon"></use>
</svg>

和跨文件引用独立SVG的方式相比，内联图标库的优势：

• 不存在跨域加载被浏览器拦截、平台过滤SVG属性的问题
• 引用内联元素时，浏览器尺寸计算完全遵循SVG规范，不会出现0尺寸的异常
• 所有图标随页面一次性加载，不会产生额外的HTTP请求，页面加载速度更快

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