如何通过<use>元素像图片一样调整SVG图标尺寸

要让<use>引用的SVG图标像<img>一样自适应容器且无空白，核心是让引用的SVG能识别图标的原始尺寸比例，具体可以按以下步骤操作：

1. 改造源SVG的图标定义 #

把每个图标用<symbol>标签包裹，并为每个<symbol>设置正确的viewBox属性。viewBox的值对应图标的原始画布尺寸（比如0 0 24 24表示左上角坐标0,0，宽高24x24），这个尺寸要和图标实际绘制的范围完全匹配。

示例源SVG代码：

<!-- 隐藏的图标仓库，display:none避免渲染到页面 -->
<svg style="display: none;">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 32 32">
    <circle cx="14" cy="14" r="10"/>
    <path d="M27 27l-5-5"/>
  </symbol>
</svg>

2. 调整引用代码 #

引用时，<svg>标签不需要额外设置width/height，直接通过<use>指向对应的<symbol>即可（现代浏览器用href替代旧的xlink:href）：

<div class="container">
  <svg>
    <use href="#icon-close"></use>
  </svg>
</div>

3. 应用CSS规则 #

你的原有CSS规则可以直接生效，因为<symbol>的viewBox已经告诉了引用的SVG图标的比例，缩放时会自动保持正确的宽高比，不会出现空白：

.container svg {
  width: 100%;
  height: auto;
}

为什么之前会出现空白？ #

未设置viewBox时，引用的SVG会使用默认的画布尺寸（通常是300px宽、150px高），当你设置width:100%时，height会按这个默认比例计算，而不是图标本身的比例，导致图标周围出现多余空白。用<symbol>+viewBox能让SVG基于图标的真实尺寸比例缩放，和<img>的表现完全一致。

如果无法修改源SVG（比如用的第三方图标库），可以在引用的<svg>上手动添加对应图标的viewBox值，但这种方式需要逐个设置，不如改造源SVG高效。

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