Добавление svg изображения в качестве фона без сохранения пропорций и обрезки

Ниже расскажу, как добавить svg изображение на задний фон, чтобы можно было редактировать ширину и высоту, чтобы изображение не обрезалось и чтобы оно подстраивалось под заданные размеры, а не сохраняло первоначальные пропорции, при этом можно будет редактировать цвет.

Решим эту задачу через добавление псевдоэлемента

1. Делаем html-разметку выбираем к какому элементу, добавить псевдоэлемент, один из вариантов добавить контейнеру, чтобы изображение подстраивалось под размеры контейнера.
2. Добавляем контейнеру стили position: relative;
3. Добавляем псевдоэлемент, в поле content оставляем пустым, т.к. если в него вставить код свг, то мы не сможем редактировать размеры.
4. Код свг вставляем через свойство background-image: копируем код свг из фигмы, убираем лишние пробелы, добавляем перед тегом svg data:image/svg+xml;utf8, меняем в значениях цвета решетку на %23, убираем fill=”none” и атрибуты width height
5. Вставляем в код свг атрибут со значением preserveAspectRatio="none", для того, чтобы свг изображение не сохраняло пропорции.
6. Добавляем остальные свойства и значения для псевдоэлемента: position: absolute; z-index: -1; width: 112%; height: 140%; top: -20%; left: -6%;

В итоге получится вот такой код

<style>
.hero__container {
  position: relative;
}

.hero__container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  left: -6%;
  width: 112%;
  height: 140%;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1730 832" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M212.296 49.5301C148.151 70.5142 105.086 78.0129 60.6852 127.645C13.7649 180.094 1.68017 227.5 0.141084 297.344C-2.02739 395.749 20.9214 451.967 60.6852 542.014C95.2589 620.309 114.743 669.6 178.271 726.976C320.831 855.733 476.684 756.158 668.128 772.768C894.809 792.436 1026.18 860.577 1249.05 818.56C1425.7 785.256 1567.4 776.984 1667.36 642.127C1751.25 528.948 1729.92 433.24 1720.39 297.344C1713.84 203.743 1730.81 137.021 1667.36 62.9984C1560.28 -61.908 1394.45 38.8262 1219.03 31.1239C934.861 18.6468 774.682 17.5342 490.498 31.1239C381.74 36.3248 314.645 16.0481 212.296 49.5301Z" fill="url(%23paint0_linear_1191_22766)" fill-opacity="0.2"/><defs><linearGradient id="paint0_linear_1191_22766" x1="1838.99" y1="440.501" x2="-0.816125" y2="338.411" gradientUnits="userSpaceOnUse"><stop offset="0.0509137" stop-color="%235A973E"/><stop offset="1" stop-color="%2322A6DC"/></linearGradient></defs></svg>');
  background-repeat: no-repeat;
}
</style>
<section class="hero__section">
    <div class="container hero__container">
        <div>Тут ваш контент</div>
    </div>
</section>