В данном случае держать SVG в разметке, как в примере
Андрей, необязательно.
Все что нужно — внешний файл SVG с атрибутом
preserveAspectRatio="none" +
background-size: 100% 100%. Тогда можно вызывать нужную картинку с волной через
background: url() — и все будет адаптивно растягиваться.
В примере я сделал не через ссылку, а через base64, потому что не знаю хостингов, куда можно загрузить SVG, вам же нужно просто поменять base64-код на ссылку с вашего хостинга:
Вот сам код SVG, обратите внимание на атрибут
preserveAspectRatio="none":
<svg preserveAspectRatio="none" viewBox="0 0 314 109">
<path d="M45.33 34.92A183.358 183.358 0 0 0 92.91 41c70.66.27 107.53-30.89 180.89-30.95a263.848 263.848 0 0 1 40.2 3.09V109H0V15.82a181.388 181.388 0 0 0 45.33 19.1z" fill="#fff"></path>
</svg>
Средний
