本文详解如何通过设置 viewBox 属性，使 <use> 引用的 SVG 符号（<symbol>）在 HTML 中响应式缩放，解决默认宽度 300px 导致比例失真、尺寸异常的问题。
本文详解如何通过设置 `viewbox` 属性，使 `
在 Web 开发中，使用 <symbol> + <use> 是复用 SVG 图标的推荐方式，既能减少重复代码，又支持 CSS 控制颜色（如 fill: currentColor）。但一个常见陷阱是：当仅设置 height: 1em 而未显式声明 viewBox 时，外层 <svg> 元素会沿用浏览器默认渲染行为——无 viewBox 的 SVG 默认宽度为 300px，高度为 150px（W3C 规范定义），即使内容仅需 40×20 单位，也会被拉伸或留白。
你遇到的 302×18 尺寸（含 1px 边框）正是这一机制的结果：300px 默认宽 + 左右各 1px 边框 = 302px；而 height: 1em 生效后高度被压缩为 18px，但宽度未按比例收缩，导致严重失真。
✅ 正确解法：为外层 <svg> 显式添加与 <symbol> 一致的 viewBox
<svg class="logo" viewBox="0 0 40 20"> <use xlink:href="foo.svg#test" x="0" y="0" /> </svg>
viewBox="0 0 40 20" 告诉浏览器：该 SVG 的坐标系逻辑尺寸为宽 40、高 20 单位。此时再配合 CSS 中的 height: 1em 和 width: auto，浏览器即可按 等比缩放 渲染整个内容——最终渲染尺寸将严格遵循 1em 高度，并自动计算出匹配宽高比的宽度（即 2em，因 40:20 = 2:1），得到预期的 34×18（假设 1em = 17px）。
⚠️ 注意事项：
- viewBox 必须与 <symbol> 的 viewBox 完全一致（包括数值和顺序），否则缩放基准错位；
- 若 SVG 文件通过外部 URL 引入（如 foo.svg#test），需确保跨域策略允许（推荐内联 base64 编码或同源部署）；
- 现代写法可改用 href 替代已废弃的 xlink:href（Chrome/Firefox/Edge 均已支持）；
- 不要依赖 width="auto" 单独生效——没有 viewBox，auto 仅按默认 300×150 计算比例，毫无意义。
? 进阶提示：若需多图标统一缩放，可将 viewBox 抽取为 CSS 自定义属性（需配合 JS 动态注入），或使用 <svg><use> 封装成 Web Component，进一步提升可维护性。
