添加width和height后，如何去除Sprite SVG周围的多余空白？

问题根源 #

你遇到的空白问题，核心原因是引用SVG的容器与symbol的尺寸规则不匹配：

• 你的<symbol>同时设置了width="100"、height="100"（固有尺寸）和viewBox="0 0 1024 1024"（坐标范围）；
• 不给外层<svg>加width/height时，浏览器直接用symbol的固有尺寸（100x100）作为容器尺寸，内容刚好填满；
• 给外层<svg>设置新的width/height后，容器尺寸变大，但<use>默认只会按symbol的固有尺寸渲染，导致内容居中显示，周围出现空白。

三种解决方案 #

方案1：移除symbol的width/height属性

让symbol的尺寸完全由viewBox控制，引用时自动适配外层<svg>的宽高，复用性更强：
修改Sprite中的symbol部分：

<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="moneyback-icon">
  <!-- 原路径内容保持不变 -->
</symbol>

外层HTML直接设置width/height即可：

<svg width="200" height="200">
  <use href="https://example.com/sprite-svg.svg#moneyback-icon"></use>
</svg>

方案2：给外层<svg>添加viewBox属性

让外层SVG的坐标范围与symbol一致，内容自动填满容器：

<svg width="200" height="200" viewBox="0 0 1024 1024">
  <use href="https://example.com/sprite-svg.svg#moneyback-icon"></use>
</svg>

方案3：给<use>设置100%宽高

强制<use>元素填满整个外层SVG容器：

<svg width="200" height="200">
  <use href="https://example.com/sprite-svg.svg#moneyback-icon" width="100%" height="100%"></use>
</svg>

验证效果 #

以上三种方法都能让symbol内容完全填满你设置的width/height容器，消除多余空白，根据实际场景选择即可。

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