为何独立.svg文件可自适应宽高，内嵌HTML却仅适配宽度？

咱们先搞清楚核心问题：单独打开SVG时，浏览器会自动把SVG视口匹配整个窗口，所以能同时响应宽高变化；但内嵌到HTML后，HTML的body和html元素默认不会占满整个视口高度，SVG的高度自然没法跟着窗口走。下面是具体的解决步骤：

步骤1：让HTML和Body占满整个视口 #

首先在<style>标签里给根元素设置全屏样式，确保它们能覆盖浏览器的整个可视区域：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选，避免出现不必要的滚动条 */
}

步骤2：给SVG添加响应式约束 #

接下来需要让SVG能跟随视口的宽高同时缩放，还得保持自身的宽高比不被拉伸，有两种常用方式：

方式一：用CSS控制SVG尺寸 #

在样式中给SVG添加以下规则：

svg {
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  object-fit: contain; /* 关键：保持SVG原有比例，避免拉伸变形 */
}

方式二：直接修改SVG标签属性 #

如果你不想额外写CSS，也可以直接修改SVG的属性，把固定尺寸换成相对单位，同时指定比例保持规则：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1400 778" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
  <!-- 你的SVG内容 -->
</svg>

这里的preserveAspectRatio="xMidYMid meet"和CSS里的object-fit: contain效果一致，会让SVG保持比例并居中显示在视口中。

完整示例代码 #

把以上设置整合后，你的HTML文件应该是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Overview</title>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
svg {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}
</style>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1400 778" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
  <!-- 你的SVG代码 -->
</svg>
</body>
</html>

原理补充 #

单独打开SVG时，浏览器的渲染上下文默认以SVG的viewBox为基准，自动匹配窗口尺寸；但内嵌到HTML后，SVG的父容器（body）默认高度由内容决定，不是全屏状态。通过让根元素占满视口，再给SVG设置全屏尺寸和比例约束，就能复刻单独打开SVG时的响应式效果。

内容的提问来源于stack exchange，提问作者Faisal Ashfaq