SVG响应式核心是viewBox而非width/height；必须设置viewBox定义坐标系，配合preserveAspectRatio="xMidYMid meet"实现等比缩放、居中且不裁剪，推荐内联SVG+Flex/Grid布局控制图文关系。
SVG在响应式Web中不是“设个width:100%就行”的图像，而是需要结合 viewBox、容器逻辑和布局上下文协同控制的矢量画布。关键在于让 SVG 的缩放行为可预测、不失真、不裁剪，同时与文本、交互元素形成稳定的空间关系。
用 viewBox + 宽高百分比替代固定尺寸
直接写 width="800" height="400" 会锁死 SVG 尺寸，破坏响应性。正确做法是：
- 移除 width/height 属性，或设为
width="100%" height="100%"</li> <li>必须设置 <code>viewBox="0 0 [宽] [高]"
，例如viewBox="0 0 800 400"—— 这定义了内部坐标系，是缩放的基准 - 配合
preserveAspectRatio="xMidYMid meet"（默认值），确保内容完整居中显示，不拉伸不变形
内联 SVG 优于 CSS background-image
把 SVG 当作背景图用 background-image: url(...) 看似简洁，但实际带来三重问题：
- 无法参与文档流，文本无法真正“叠”在图形上，只能靠绝对定位硬凑，响应时易错位
- background-size: cover/contain 会强制裁剪或留白，SVG 内部路径、文字比例完全失控
- 失去语义、无障碍支持（如 aria-label）、CSS 动画和 JS 交互能力
推荐将 SVG 直接写入 HTML，作为普通 DOM 元素，再用 Flex 或 Grid 控制其与文本的关系。
用 Flex/Grid 实现 SVG 与文本的响应式居中组合
常见需求是“SVG 背景 + 居中标题”，不要把文本塞进 SVG 的
- 外层容器设
display: flex; align-items: center; justify-content: center; - SVG 设为
width: 100%; max-width: 600px;，配合aspect-ratio或 padding-top 填充技巧保比例 - 文本单独作为兄弟元素，用
text-align: center;或margin: auto;对齐 - 移动端可加媒体查询微调字体大小，例如
font-size: clamp(1.25rem, 4vw, 2.5rem);
适配旧浏览器的宽高比保护技巧
当需要兼容不支持 aspect-ratio 的浏览器（如 Safari 15.4 以下），可用 padding-top 填充法维持 SVG 容器比例：
- 给 SVG 外层 div 设
position: relative; width: 100%; padding-top: 50%;（2:1 比例即 50%） - SVG 本身设
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 这样无论父容器多宽，高度都按比例撑开，SVG 不会塌陷或溢出
