SVG embedded in CSS is not being displayed properly - css

Question

I'm implementing a layout for a web-app running on Rails 5.2.
The layout has a header with a Css class (named section-divider) whose background is a SVG and it should occupy all the page width.
The SVG works fine in the HTML file I received from the designer: if I open the html file, it works correctly (check the first image).
The SVG doesn’t behave properly when I run the same code from the rails app (check the second image).
The only difference between the HTML version and the Rails one, is the reference to the SVG in the SCSS file.
I’ve tried multiple options and ways to reference the file without luck.
The SVG is being always displayed but it doesn’t stretch as it should.
It’s driving me crazy because the output HTML and Css are the same (from Rails and from the HTML provided by the designer)
SVG file
<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>
HTML CODE: the section-divider class is the one whose background is the SVG (just at the beginning, in the header)
<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>
CSS in Rails
.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;
}
CSS in designer files (landing_page.scss)
.section-divider{
background: url('../front/divider/header.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 2rem;
}
In this image, the grey area is the SVG and in this image and it is displayed correctly
In this other image, the grey area is the SVG and it is NOT displayed correctly (because it doesn't stretch)

Answer 1

I suppose this is what you want to achieve.
.section-divider{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio ='none' viewBox='0 0 1920 638'%3E%3Cpath d='M0,0H1920V392a246,246,0,0,1-246,246H246A246,246,0,0,1,0,392V0Z' fill='%23aaa'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 2rem;
border:1px solid;
}
<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>
In this case you need to use the following svg instead:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 638" preserveAspectRatio ="none">
<path id="Rectangle_69" data-name="Rectangle 69" d="M0,0H1920V392a246,246,0,0,1-246,246H246A246,246,0,0,1,0,392V0Z" fill="#aaa"/>
</svg>
Please observe that the svg has no width and height. Also I've added preserveAspectRatio ="none".
Please read about the preserveAspectRatio
attribute. If preserveAspectRatio="none" the image will be scaled non-uniformly.
Also your path has 2 arcs with radius 0. I've removed those arcs.