<img> 引入的 SVG 无法响应式缩放，因浏览器将其当位图处理，丢失 viewBox 比例信息；内联 SVG + viewBox 是唯一可靠方案，需删 width/height 属性并用 CSS 控制尺寸。
为什么 <img> 引入的 SVG 无法响应式缩放？
直接用 <img src="icon.svg"> 加载 SVG，浏览器把它当位图处理：即使 SVG 本身是矢量，width 和 height 被设为固定像素（如 24px），就失去 viewBox 的比例信息。CSS 设置 width: 100% 会拉伸变形，max-width: 100% 也仅限制宽度，高度不联动。
根本问题在于：没有 viewBox + 没有显式宽高比 → 浏览器不知道该按什么比例缩放。
- 服务端未返回
Content-Type: image/svg+xml时，部分浏览器（尤其本地双击打开）直接拒解析，显示空白或下载提示 - IE 和旧 Android WebView 对
<img>中 SVG 的viewBox支持不一致，易 fallback 失败 - 无法用 CSS 修改内部
<path>的fill或添加 hover 动画
内联 SVG + viewBox 是唯一可靠方案
把 SVG 原始代码粘贴进 HTML（即“内联”），并确保根 <svg> 标签带 viewBox 属性，这是实现等比缩放的硬性前提。删掉 width 和 height 内联属性——它们会覆盖 viewBox 的比例逻辑。
示例（精简后）：
立即学习“前端免费学习笔记（深入）”；
<svg class="icon" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg>
- CSS 控制尺寸：
.icon { width: 1.5em; height: auto; }——height: auto触发 viewBox 定义的宽高比自动计算宽度 - 颜色继承：
path { fill: currentColor; }，图标自动随父元素文字色变化 - 避免写死
fill="#000"在<path>里，否则 CSS 的fill会被忽略
<use> 引用 <symbol> 时必须同步 viewBox
用图标库方式（<symbol> 定义 + <use> 实例化）时，很多人只给 <symbol> 设了 viewBox，却忘了外层包裹的 <svg> 也需要它。
错误写法（缩放失效）：
<svg><use href="#icon-home"></use></svg>
正确写法（必须显式声明）：
<svg class="icon" viewBox="0 0 24 24"><use href="#icon-home"></use></svg>
-
viewBox值必须与对应<symbol id="icon-home">的viewBox完全一致，否则比例错乱 - 不能依赖
<symbol>的 viewBox “透传”给外层<svg>—— 它们是独立容器 - 若多个图标 viewBox 尺寸不同（如 16×16 和 24×24），每个
<svg>都得单独写对应 viewBox，不可共用类名统一设置
表格内 SVG 自适应需 JS 辅助
纯 CSS 在 <table> 中无法让多个 SVG 按原始 viewBox 比例动态分配宽度 —— 表格单元格的 width 计算不暴露给 CSS，max-width: 100% 也不触发等比缩放。
轻量级解决思路：
- CSS 层：给表格设
table-layout: fixed，SVG 设display: block; max-width: 100%; height: auto; - JS 层：遍历所有 SVG，用
getBoundingClientRect().width获取当前渲染宽度，对比容器宽度，按 viewBox 的width比例重新设svg.style.width - 监听
resize事件重算，但建议节流（如 100ms）避免频繁触发
真正容易被忽略的是：表格中 SVG 的 vertical-align 默认为 baseline，会导致底部对齐错位。加一句 vertical-align: top 或 middle 才能严丝合缝。
