SVG缩放由viewBox、width/height和preserveAspectRatio共同决定；缺viewBox会导致像素拉伸失真，preserveAspectRatio控制对齐与裁剪，响应式推荐用height="auto"或CSS aspect-ratio锁定容器比例。

width 和 height 设为百分比本身可行，但单独这么做几乎没用——浏览器会按父容器尺寸计算，而 SVG 内容是否随之缩放，完全不取决于这两个属性，而取决于 viewBox 是否存在、以及 preserveAspectRatio 的取值。

为什么只写 width="100%" height="100%" 通常无效

常见错误现象：SVG 在容器里“消失”、只显示左上角一小块、或文字/线条严重模糊。根本原因是缺失 viewBox，导致 SVG 进入“无坐标系模式”，此时百分比宽高仅控制容器框大小，内部所有坐标（如 ）仍按像素解释，不会随容器缩放。

• 必须显式声明 viewBox，例如 viewBox="0 0 800 600"，它定义了逻辑画布范围
• width 和 height 的作用只是告诉浏览器“这个 SVG 元素占多大物理空间”，真正缩放逻辑由 viewBox + 容器尺寸共同决定
• 如果父容器没有明确宽度（比如
  没设 width 或 max-width），width="100%" 就会退化成 width="auto"，结果不可控

  正确写法：CSS 控制尺寸 + viewBox 驱动缩放

  推荐用 CSS 而非内联属性控制尺寸，更易维护且兼容性好。关键组合如下：

  • 给 svg 元素加 width: 100%; height: auto;（高度自适应，保持宽高比）
  • 确保父容器有明确宽度，例如
    或

    配合 .content { width: 100%; }
  • viewBox 值需与图形内容实际范围一致，不能随意填 "0 0 100 100" 后指望它“自动适配”
  • 避免同时设 width/height 属性和 CSS 尺寸，容易冲突；优先选 CSS

  示例：

  
  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
  下载

  <div style="width: 100vw; max-width: 960px;">
    <svg viewbox="0 0 800 400" style="width: 100%; height: auto;"><rect x="100" y="50" width="200" height="100" fill="#3498db"></rect></svg>
  </div>

  preserveAspectRatio 决定怎么缩放，不是要不要缩放

  默认值 preserveAspectRatio="xMidYMid meet" 表示等比缩放、居中、完整可见（可能留白）。但很多场景需要别的行为：

  • 想填满容器且允许裁剪？用 preserveAspectRatio="xMidYMid slice"
  • 只希望水平方向拉伸、垂直方向强制压缩（比如终端字符网格）？用 preserveAspectRatio="xMinYMid slice"，左侧对齐+垂直居中+不维持比例
  • 完全取消等比约束（慎用）？preserveAspectRatio="none"，此时 viewBox 区域会被强行拉伸到容器尺寸，图形变形
  • 若要固定顶部对齐、不居中，改用 xMinYMin meet，适合顶部导航类 SVG

  移动端和嵌套场景下容易忽略的点

  在 直接放 SVG 时，常因父级未撑开导致缩放失败：

  • 必须重置 html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
  • 移动端务必加 ，否则 Safari 按 980px 渲染，100% 就算错了
  • 如果 SVG 套在
    或 Flex 容器里，检查父元素是否设置了 align-items: stretch（默认值），否则 height: auto 可能被压制
  • 使用 object-fit 对 SVG 无效——它是为 设计的，SVG 不走这一套

  最复杂也最容易被跳过的，是 viewBox 数值与图形内容的真实坐标范围是否匹配。哪怕只差一个像素，都可能导致部分图形被裁掉或位置偏移，调试时建议先用 border: 1px solid red 包裹 SVG 查看实际渲染边界。