SVG在Safari、Firefox中用img标签时100%宽度存在留白问题

问题核心：内嵌SVG能正常占满容器宽度，但用img标签加载的同内容SVG，在Safari和Firefox中出现左右留白，本质是浏览器对替换元素（img）的SVG缩放规则和内嵌SVG不同。

原因分析 #

当img加载SVG时，浏览器默认采用preserveAspectRatio="xMidYMid meet"规则：保持SVG原始宽高比（你的SVG为1380:6=230:1），将SVG居中适配容器。如果容器的宽高比和SVG的宽高比不一致，就会出现留白——比如容器因上下padding拉高高度后，宽高比变小，SVG会被缩放到容器能容纳的最大比例尺寸，导致宽度无法占满容器。

而内嵌SVG设置width:100%时，浏览器会直接强制宽度为容器宽度，高度按比例自动计算，不会触发留白逻辑。

解决方案 #

方案1：修改SVG文件（推荐，全局生效）

在SVG的根元素添加preserveAspectRatio="none"属性，让SVG忽略原始比例，拉伸填满容器：

<svg viewBox="0 0 1380 6" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <rect width="1380" height="6" rx="4" fill="black"/>
</svg>

方案2：通过CSS强制img拉伸（无需修改SVG）

给img标签添加object-fit: fill属性，强制替换元素填满容器：

img {
  width: 100%;
  object-fit: fill;
}

方案3：调整SVG的viewBox和内容匹配（可选）

如果不需要拉伸，希望保持比例但消除留白，可以调整viewBox让内容的实际宽高比和容器一致，但这种方式灵活性差，不如前两种实用。

验证后的代码示例 #

修改后的CSS和HTML：

.wrapper {
  width: 100%;
  padding: 2px 0px;
  background: #090;
}

.svg {
  width: 100%;
}

img {
  width: 100%;
  /* 方案2的CSS */
  object-fit: fill;
}

<div class="wrapper">
  <svg class="svg" viewBox="0 0 1380 6" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="1380" height="6" rx="4" fill="black"/>
  </svg>
</div>
<hr/>
<div class="wrapper">
  <!-- 方案1修改后的SVG -->
  <img src="修改后的SVG文件路径" />
</div>
<hr/>
<div class="wrapper">
  <!-- 方案2适配后的无viewBox SVG -->
  <img src="原无viewBox的SVG文件路径" />
</div>

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