CSS中嵌入的SVG未正确显示

我正在为运行在Rails 5.2上的web应用程序实现布局。
布局有一个带有Css类（名为section divider）的标题，其背景是SVG，它应该占据所有页面宽度

SVG在我从设计器收到的HTML文件中工作良好：如果我打开HTML文件，它工作正常（检查第一幅图像）。
当我从rails应用程序运行相同的代码时，SVG无法正常运行（请查看第二幅图像）。
HTML版本和Rails版本之间的唯一区别是SCSS文件中对SVG的引用

我尝试了多种选项和方法来引用该文件，但运气不佳。
SVG始终显示，但它没有按应有的方式拉伸。
这让我抓狂，因为输出的HTML和Css是一样的（来自Rails和设计师提供的HTML）

SVG文件

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="638" viewBox="0 0 1920 638">
  <path id="Rectangle_69" data-name="Rectangle 69" d="M0,0H1920a0,0,0,0,1,0,0V392a246,246,0,0,1-246,246H246A246,246,0,0,1,0,392V0A0,0,0,0,1,0,0Z" fill="#aaa"/>
</svg>

designer文件中的CSS（landing_page.scss）

在本图中，灰色区域为SVG，在本图中正确显示

在另一幅图中，灰色区域是SVG，显示不正确（因为它不会拉伸）

---

我想这就是你想要实现的目标。

。分段分隔器{
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg“PreserveSpectratio='none'viewBox='0 1920 638'%3E%3Cpath d='M0,0H1920V392A246246,0,0,1-246246H246A246246,0,0,1,0392V0Z'填充='%23aaa'/%3E%3C/svg%3E]；
背景位置：中心；
背景重复：无重复；
背景大小：100%100%；
垫底：2rem；
边框：1px实心；
}

客车

<header class='search-bar text-center section-divider'>
  <div class='container pt-4'>
    <div class='mx-auto input-group col col-md-6  col-xxxl-4 ' >
      <input type='text' class='form-control shadow-sm search-input' placeholder='' aria-label='Qué buscas' aria-describedby='button-addon2'>
      <div class='input-group-append'>
        <button class='btn btn-outline-primary' type='button' id='button-addon2'>Buscar</button>
      </div>
    </div>
  </div>
</header>

.section-divider (landing_page.scss){
  background: image-url("front/divider/header.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 2rem;
}

.section-divider{
  background: url('../front/divider/header.svg');
  background-position:  center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 2rem;
}