Есть возможность свертать правильно шапку сайта, во всю ширину с SVG?

Question

[Ivan]

Всем привет.
Имеется макет с небольшим количеством svg графики, которая реализована в SVG, во всю ширину в нескольких блоках (в том числе и фоновые изображения), приложил уменьшенные файлы отдельно и как должно по итогу выглядеть. Буду рад принять советы по правильной реализации на html + css.
Причем файл наложения тяжёлый(около 3 штук на странице), весит 2мб, имеет ли смысл так загружать страницу?!
Заранее спасибо, всем кто поможет в решении данного вопроса.

Фон

Наложение

Итог

Comments

[Ankhena]

Фоновая волна - clip-path и вообще легко гуглятся.
Волны наложения: тут классические варианты выбора bg size
Чтобы сломать пропорции SVG нужен атрибут preserveAspectRatio

Да и всё вроде

Может быть, можно достать из макета волны целиком, без обрывающихся линий по краям. Тогда ещё вариант просто расположить по центу и ок.

И да, обычно такие волны в растре весят заметно меньше, чем векторные. И тогда image-set и media.

Answer 1

[Pavstyuk]

Если не нужна ни какая анимация этих линий на фоне, то можно просто сохранить весь этот фон как растр в формате .webp, который будет весить примерно 150Кб. Он умеет альфа канал, поэтому нижний край с волной сохранится и будет хорошо сочетаться со следующим блоком. Просто делаешь картинку фоном с позиционирование по нижнему краю. Очень простой и быстрый вариант, а вообще всякий декор на 2Мб делать никак нельзя.