svg响应式核心是利用viewbox替代固定宽高，结合css继承与媒体查询实现自适应；svgr可自动生成带icon选项的react组件；复杂交互需用svg.js监听resize并重设viewbox或缩放。
SVG图形响应式架构的核心在于让图标脱离固定尺寸束缚，依靠容器和上下文自动适配。关键不在于“写更多代码”，而在于合理利用viewBox、移除硬编码宽高、结合CSS继承机制，并在必要时用JavaScript补足动态逻辑。
用 viewBox 替代 width/height 是基础
viewBox 定义了SVG内部坐标系的范围，是实现缩放自适应的底层依据。只要保留 viewBox="0 0 w h"（如 viewBox="0 0 24 24"），再把 width 和 height 设为百分比、em 或完全删除，SVG 就能随父容器拉伸或收缩，且图形比例不变。
- 错误写法：
<svg width="24" height="24" viewbox="0 0 24 24"></svg>—— 固定像素会锁死尺寸 - 推荐写法：
<svg viewbox="0 0 24 24" width="1em" height="1em"></svg>或仅<svg viewbox="0 0 24 24"></svg> - 搭配 CSS 可进一步控制：父元素设
font-size: 20px，图标即为 20×20；设为1.5rem，图标随之放大
SVGR 自动生成响应式 React 组件
使用 SVGR 将 SVG 文件转为 React 组件时，启用 icon 选项是最轻量的响应式方案。它会自动移除原始尺寸属性，注入 width="1em" height="1em"，并保留 viewBox。
- CLI 命令：
npx @svgr/cli --icon src/icons/*.svg - 配置文件（.svgrrc）：
{"icon": true, "dimensions": false} - 生成组件默认支持 props，可传入
className或内联样式，例如：<icon style="{{" fontsize:></icon>
用 CSS 媒体查询做断点级精细控制
当需要在特定视口下改变图标尺寸、颜色甚至结构（如简化细节），纯 viewBox 不够用，此时应配合媒体查询与 CSS 变量或类名切换。
- 给 SVG 外层容器加响应式类：
<div class="icon-container"><icon></icon></div> - 在 CSS 中定义不同断点下的字体大小：
@media (max-width: 768px) { .icon-container { font-size: 16px; } } - 进阶：用
<g id="mobile"></g>和<g id="desktop"></g>分组，通过 CSS 控制显示隐藏：@media (min-width: 1024px) { #mobile { display: none; } }
SVG.js 动态画布需监听 resize 并重算比例
若用 SVG.js 创建复杂可交互图形（如图表、流程图），不能只靠 viewBox。必须监听窗口变化，主动调整画布尺寸和内部元素缩放比例。
- 初始化时设为 100%：
const draw = SVG().addTo('#container').size('100%', '100%') - 绑定 resize 事件：
window.addEventListener('resize', () => { const w = innerWidth; const h = innerHeight; draw.size(w, h); draw.children().forEach(el => el.scale(w/1000, h/1000)); }) - 更优做法：用
draw.viewbox(0, 0, 1000, 600)固定逻辑坐标系，再让容器 CSS 控制视觉尺寸
