SVG Sprite中ViewBox配置错误致图标显示异常，求正确设置方法

你的核心问题是用<g>标签存放图标并错误地给<g>设置viewbox（<g>不支持viewbox属性），且主SVG的全局viewbox和单个图标实际尺寸不匹配，导致分辨率变化时图标缩放适配失效、边缘截断。

正确的SVG Sprite设置方式 #

把每个图标容器从<g>换成<symbol>，给每个<symbol>设置匹配自身尺寸的viewbox，主SVG不需要设置全局viewbox（或设为viewbox="0 0 0 0"避免干扰），同时隐藏主SVG本身。

修改后的Sprite代码：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="circle" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
  </symbol>
  <symbol id="square" viewBox="0 0 100 100">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
  </symbol>
  <symbol id="triangle" viewBox="0 0 100 100">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
  </symbol>
  <symbol id="popup" viewBox="0 0 14 9" fill="none">
    <path d="M1 1L7 7L13 1" stroke="#29354D" stroke-width="1.5" />
  </symbol>
  <symbol id="filter" viewBox="0 0 22 18" fill="none">
    <path
      d="M21 15H14M4 15H1M21 4H18M8 4H1M6 12H12C13.1 12 14 12.5 14 14V16C14 17.5 13.1 18 12 18H6C4.9 18 4 17.5 4 16V14C4 12.5 4.9 12 6 12ZM10 1H16C17.1 1 18 1.5 18 3V5C18 6.5 17.1 7 16 7H10C8.9 7 8 6.5 8 5V3C8 1.5 8.9 1 10 1Z"
      stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
  </symbol>
</svg>

说明：

• <symbol>是专门用于Sprite的容器，原生支持viewbox属性，能精准定义每个图标的显示区域
• 每个viewbox的取值要覆盖图标所有元素的坐标范围，留少量边缘余量避免截断：比如popup路径最大坐标是(13,7)，所以设0 0 14 9；filter最大坐标是(21,18)，所以设0 0 22 18
• 主SVG用display: none隐藏，避免页面显示整个Sprite集合

HTML中<use>引用的正确设置 #

引用时，给外层<svg>设置与对应<symbol>一致的viewbox，同时定义宽高，确保缩放适配：

<svg class="popup-block__more-icon" viewBox="0 0 14 9" width="24" height="16">
  <use href="sprite.svg#popup" />
</svg>

• 外层<svg>的viewbox必须和目标<symbol>的viewbox完全匹配，这样图标才能正确缩放
• width和height可根据需求设为固定值或百分比，图标会自动适配容器尺寸

CSS背景图引用的正确设置 #

用CSS背景图引用时，必须指定background-size: contain（或cover，按需选择），同时设置容器宽高，确保图标完整显示：

.icon-filter {
  width: 44px;
  height: 36px;
  background-image: url('/sprite.svg#filter');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

• background-size: contain会让图标完整适配容器，不会出现边缘截断
• 容器宽高比例尽量和图标本身比例一致，避免拉伸变形

关键注意点 #

1. 绝对不要给<g>设置viewbox，这个属性仅属于<svg>和<symbol>元素
2. 每个<symbol>的viewbox必须精准覆盖图标所有元素的范围，留少量余量避免截断
3. 两种引用方式都需要明确设置适配规则：<use>需外层svg设置viewbox和宽高；背景图需设置background-size和容器尺寸

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