SVG真正响应式必须搭配viewBox才能等比缩放，它定义内部逻辑坐标系（如"0 0 24 24"），配合max-width:100%;height:auto;及preserveAspectRatio="xMidYMid meet"，并优先采用内联方式实现动态交互与精准适配。
SVG要真正响应式，光写 width: 100% 不够——必须搭配 viewBox 才能等比缩放不拉伸、不裁切。
viewBox 是响应式的基础前提
viewBox 定义了 SVG 内部的逻辑坐标系，格式为 viewBox="x y width height"。常见图标一般用 "0 0 24 24" 或 "0 0 16 16"，它告诉浏览器：“这个图的内容就在这块区域内，请按比例填进容器”。没有 viewBox，浏览器只能硬塞像素值，窄屏下图形被压扁、圆形变椭圆、文字错位都是典型表现。
- Figma/Sketch 导出的 SVG 往往缺 viewBox 或只带固定宽高，需手动补全
- viewBox 的四个值必须匹配原始设计画布尺寸，否则内容会过小或留白过多
- 删掉
width和height属性（或设为auto），让 CSS 全权控制显示尺寸
CSS 控制尺寸的正确写法
用 max-width: 100%; height: auto; 替代单纯的 width: 100%，既防撑爆容器，又保等比缩放。如果父容器宽度不确定，width: 100% 可能失效；而 max-width 更可靠。
- 推荐样式：
svg { max-width: 100%; height: auto; } - 需要固定比例时（如图标占容器宽的 1/4），可用
width: 25%; height: auto; - 避免同时设
width和height（如width: 100%; height: 24px;），这会强制拉伸，破坏矢量特性
preserveAspectRatio 确保对齐方式
viewBox 默认行为是居中缩放并保持宽高比，但可通过 preserveAspectRatio 微调。最常用的是 "xMidYMid meet"：内容完整可见、居中、等比缩放，适合图标类图形。
-
meet→ 全部内容可见，可能有留白 -
slice→ 填满容器，可能裁切边缘 - 可直接写在 SVG 标签里：
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
内联 SVG 才能发挥全部响应能力
用 <img src="icon.svg"> 引入时，即使 SVG 文件自带 viewBox，浏览器也当位图处理，无法 CSS 填色、hover 变色或精细缩放。只有把 SVG 代码直接写进 HTML（内联），才能真正响应式交互。
- 动态换色、状态反馈、动画控制，都依赖内联 SVG
- CMS 或平台限制不能内联时，确保 SVG 源文件含 viewBox，并给 img 加
max-width: 100%; height: auto; - 图标系统建议统一用内联 + class 控制尺寸和颜色，维护更灵活
