本文详解如何通过设置 viewBox 属性，使 引用的 SVG 符号（）在 HTML 中响应式缩放，解决默认宽度 300px 导致比例失真、尺寸异常的问题。

本文详解如何通过设置 `viewbox` 属性，使 `` 引用的 svg 符号（``）在 html 中响应式缩放，解决默认宽度 300px 导致比例失真、尺寸异常的问题。

在 Web 开发中，使用 + 是复用 SVG 图标的推荐方式，既能减少重复代码，又支持 CSS 控制颜色（如 fill: currentColor）。但一个常见陷阱是：当仅设置 height: 1em 而未显式声明 viewBox 时，外层 无 viewBox 的 SVG 默认宽度为 300px，高度为 150px（W3C 规范定义），即使内容仅需 40×20 单位，也会被拉伸或留白。

你遇到的 302×18 尺寸（含 1px 边框）正是这一机制的结果：300px 默认宽 + 左右各 1px 边框 = 302px；而 height: 1em 生效后高度被压缩为 18px，但宽度未按比例收缩，导致严重失真。

✅ 正确解法：为外层

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

<svg class="logo" viewbox="0 0 40 20"><use xlink:href="foo.svg#test" x="0" y="0"></use></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 必须与 的 viewBox 完全一致（包括数值和顺序），否则缩放基准错位；
• 若 SVG 文件通过外部 URL 引入（如 foo.svg#test），需确保跨域策略允许（推荐内联 base64 编码或同源部署）；
• 现代写法可改用 href 替代已废弃的 xlink:href（Chrome/Firefox/Edge 均已支持）；
• 不要依赖 width="auto" 单独生效——没有 viewBox，auto 仅按默认 300×150 计算比例，毫无意义。

? 进阶提示：若需多图标统一缩放，可将 viewBox 抽取为 CSS 自定义属性（需配合 JS 动态注入），或使用