SVG在Flex容器中不缩放的根本原因是缺少viewBox属性，导致浏览器无法确定原始宽高比而回退到300px默认宽度；需确保viewBox值匹配设计稿、清除内联宽高、包裹div控制flex-shrink，并慎用preserveAspectRatio="none"。
flex容器里SVG不缩放？先检查viewBox有没有
Flex布局中SVG“卡死”在默认300px宽，不是flex没生效，而是SVG缺viewBox——没有它，浏览器就不知道这个SVG的原始宽高比，width: auto就只能回退到300px。哪怕你写了height: 1em，宽度也不会跟着等比变。
打开SVG源码，确认<svg>标签第一行含类似viewBox="0 0 24 24"的属性，且数值必须匹配原始设计稿（比如Figma导出是24×24，就不能写成"0 0 100 100"）。
- 用SVGO清理冗余
width/height属性，避免干扰 - Sketch/Figma导出时关掉“Use Artboard Size”选项，防止插件硬塞内联尺寸
- IE11和旧Safari对
viewBox更敏感，漏写基本等于放弃兼容
flex-shrink: 0加在<svg>上无效？得包一层<div>
SVG是替换元素，flex-shrink直接作用于它本身不会触发缩放控制；真正起效的是包裹它的容器。给SVG套个<div class="icon-wrapper">，再把flex-shrink: 0和min-width: 0加在wrapper上。
同时确保wrapper有明确尺寸约束：
立即学习“前端免费学习笔记（深入）”；
- wrapper设
width: 100%（不是max-width），否则iOS Safari 15.4前可能忽略 - 父级flex容器需定义
flex-basis或明确宽度，否则wrapper无法计算收缩基准 - 删掉SVG上的
object-fit——对内联SVG完全无效，还可能干扰渲染
想让SVG严格贴合父容器高度？preserveAspectRatio="none"是开关
当SVG需要填满flex分配后的固定高度（比如h-8或height: 40px），又不想溢出时，光靠height: 100%不够。必须配合preserveAspectRatio="none"属性，告诉浏览器：“允许非等比拉伸”。
典型写法：
svg {
width: 100%;
height: 100%;
preserveAspectRatio: none;
}
注意：这会牺牲宽高比，只适用于明确需要“撑满”的场景（如背景图、全屏图表）。普通图标慎用。
响应式缩放别只靠媒体查询，状态类更可靠
工具栏折叠、侧边栏收起这类UI状态变化，不能指望@media (max-width: 768px)自动适配——小屏下用户可能横屏，断点值就失效了。应该把尺寸绑定到状态类上：
- 定义
.sidebar-collapsed .icon→width: 18px; height: 18px; - 搭配CSS变量统一管理：
:root { --icon-size: 24px; }，状态类里覆盖变量值 - 避免单独设
height: auto：Firefox和Safari解析不一致，始终配对设置width和height，或用aspect-ratio: 1 / 1（Chrome 103+支持）
最易被忽略的一点：所有尺寸控制必须绕过SVG内联width/height，哪怕写成width="100%"也会触发光栅化路径——模糊、错位、点击热区偏移，全从这里开始。
