使用SVG use标签引用与直接嵌入SVG显示效果不同的原因

1. 尺寸与 viewBox 不匹配导致的显示差异 #

• 直接嵌入的SVG明确设置了width="24"、height="25"，同时viewBox="0 0 24 25"，图形会严格按照设定的尺寸和 viewBox 比例渲染。
• 使用<use>的外层SVG（<svg class="useSvg">）未设置宽高属性，浏览器会采用默认尺寸（通常为300px宽、150px高）渲染容器；同时引用的<symbol>的viewBox是0 0 24 24，和直接嵌入版本的24x25 viewBox 存在差异，这会导致图形的缩放比例、显示大小和直接嵌入的版本不一致。

2. 背景色问题的根源 #

你提到的"背景色"并非<use>引用本身添加的，大概率是以下两种情况：

• 外层SVG容器的默认填充：直接嵌入的SVG设置了fill="none"，而引用的外层SVG未设置该属性，部分浏览器会默认给SVG容器填充白色（或继承父元素背景），看起来像是图形自带背景色。
• 尺寸过大导致容器背景暴露：引用的SVG容器未设置宽高，默认尺寸远大于图标本身，容器的背景（比如父元素背景或浏览器默认背景）会显示出来，让你误以为是图标自带了背景色。

修复方案 #

要让<use>引用的SVG和直接嵌入的效果一致，只需调整外层SVG的属性：

<svg class="useSvg" width="24" height="25" viewBox="0 0 24 25" fill="none">
  <use href="#chevron" />
</svg>

• 添加和直接嵌入版本一致的width、height和viewBox，保证尺寸和比例匹配；
• 设置fill="none"避免默认填充带来的背景色问题。

另外，注意<symbol>的viewBox是0 0 24 24，和直接嵌入的24x25有1px高度差，若需要完全一致的显示，建议把<symbol>的viewBox也改成0 0 24 25，确保图形布局范围完全匹配。

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