SVG响应式必须设置viewBox，仅设width:100%会导致拉伸变形或裁切；viewBox定义内部坐标系（如"0 0 24 24"），配合max-width:100%; height:auto和preserveAspectRatio="xMidYMid meet"才能正确缩放。
直接给 width 和 height 设百分比（比如 width: 100%）不能让 SVG 真正响应式——它只会拉伸变形或裁切，除非你同时正确设置了 viewBox。
为什么只设 width: 100% 会出问题
SVG 默认按像素坐标渲染。没有 viewBox 时，cx="100" 就是“离左边 100 像素”，容器一缩，图形就溢出或只剩一角。浏览器根本不知道这个图的逻辑边界在哪。
- 常见错误现象：
<svg width="100%">在窄屏下图标被压扁、文字错位、圆形变椭圆 - 本质原因：缺少坐标系定义，浏览器只能硬塞，不缩放也不对齐
- 真实使用场景：Figma 导出的 SVG 默认没
viewBox，或只带固定width="24" height="24"
viewBox 必须显式声明且值要匹配原始设计
viewBox 不是可选项，它是 SVG 响应式的前提。它的四个值 "min-x min-y width height" 定义了内部坐标系范围，绝大多数图标应设为 "0 0 24 24" 或 "0 0 16 16"（取决于设计稿画布）。
- 错误写法：
viewBox="0 0 100 50"但图标实际只用了左上角一小块 → 缩放后内容极小、四周大片留白 - 正确做法：打开 SVG 文件，看
<svg>标签内是否有viewBox；没有就补上，值参考设计工具导出设置（如 Figma 的 “Responsive” 选项） - 兼容性注意：IE9+ 支持
viewBox，但 IE10–11 对preserveAspectRatio解析有偏差，建议始终显式写preserveAspectRatio="xMidYMid meet"
CSS 控制尺寸时优先用 max-width + height: auto
单纯 width: 100% 在嵌套深、父容器无宽或 flex 容器中容易失效；max-width: 100%; height: auto 才能稳定维持宽高比。
立即学习“前端免费学习笔记（深入）”；
- 推荐样式：
.icon { max-width: 100%; height: auto; } - 避免组合：
width: 100%; height: 24px→ 强制拉伸，矢量优势归零 - 移动端特别注意：不要依赖
height: 100%，它需要父元素有明确高度，而多数图标父容器是display: inline或未设高 - 如果需等比例缩放到容器宽的 20%，用
width: 20%; height: auto，不加max-width
大尺寸 SVG（如背景图、数据可视化）要额外处理宽高比
当 SVG 内容复杂、宽高比与容器差异大时，preserveAspectRatio 的行为直接影响显示效果。
- 默认
xMidYMid meet：完整显示，居中，可能上下/左右留白（安全首选） - 填满容器且接受裁剪：用
preserveAspectRatio="xMidYMid slice"，适合全屏 Banner 图 - 禁止拉伸但允许滚动：CSS 加
overflow: hidden配合viewBox动态调整（例如地图缩放） - 关键细节：修改
viewBox的width和height值本身就能实现“裁剪式缩放”，比如原图"0 0 800 600"，改成"100 50 600 500"就跳转到局部区域
最容易被忽略的是：viewBox 的数值必须和原始设计稿一致。改错一个数字，整个图的缩放基准就偏了——不是调 CSS 能救回来的。
