我遇到过类似的Firefox和Chrome对SVG渲染差异的问题，这本质上是两款浏览器对未明确设置viewBox的SVG处理逻辑不同导致的。下面给你两种可行的解决方案：

方案一：通过CSS强制SVG填满容器 #

无需修改SVG文件，直接给你的#logo元素添加object-fit和object-position属性，就能让Firefox和Chrome表现一致：

修改后的CSS代码：

body { padding: 0; }
#container { padding-left: 5em; padding-right: 5em; }
#logo { 
  width: 100%; 
  display: block; 
  object-fit: cover; /* 强制SVG填充容器，保持比例 */
  object-position: center; /* 确保SVG在容器中居中显示 */
}
.separator { width: 100%; height: 1px; background-color: black; }

原理说明： #

Chrome会自动拉伸没有设置viewBox的SVG来适应容器宽度，但Firefox会保留SVG原始的内部布局边距。object-fit: cover会让SVG按照容器尺寸填充，同时维持自身的宽高比例，完美解决两侧空白的问题。如果你不需要保持比例（允许SVG拉伸变形），可以把cover换成fill。

方案二：修改SVG文件的属性（推荐，更彻底） #

如果可以编辑SVG文件，给SVG根元素添加viewBox和preserveAspectRatio属性，从根源上解决浏览器渲染差异：

打开你的SVG文件，找到根<svg>标签，添加如下属性（替换成你SVG实际的宽高数值，比如假设你的SVG宽是1200，高是300）：

<svg viewBox="0 0 1200 300" preserveAspectRatio="xMidYMid meet" ...>
  <!-- SVG内容 -->
</svg>

原理说明： #

viewBox定义了SVG的坐标系统和可视区域，preserveAspectRatio="xMidYMid meet"会让SVG在保持比例的前提下，尽可能填满容器。这样无论在哪个浏览器，SVG都会按照统一的规则缩放，不会出现空白。

你的HTML代码不需要变动，保持原有结构即可：

<div id="container">
 <img src="你的SVG路径" id="logo">
 <br>
 <div class="separator"></div>
</div>

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