Я использую getwaves.io для создания SVG-волн для веб-сайта. Я хочу добавить SVG вверху экрана прямо под панелью навигации. Проблема в том, что когда экран становится меньше, SVG теряет свою первоначальную форму. Как я могу убедиться, что SVG выглядит одинаково на всех экранах разных размеров?
Кстати, мне пришлось добавить style="height: 100%" к SVG, иначе он просто исчезнет на экранах меньшего размера.
<svg style="height: 100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#000" fill-opacity="1" d="M0,128L48,149.3C96,171,192,213,288,224C384,235,480,213,576,192C672,171,768,149,864,138.7C960,128,1056,128,1152,154.7C1248,181,1344,235,1392,261.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
ОБНОВЛЕНИЕ:
Если я удаляю панель навигации и добавляю width: 100%, это работает. Но с навигационной панелью кажется, что часть SVG проходит под навигационной панелью, когда экран становится меньше.