В общем, проблем несколько:
1) вы редактируете позиционку div-контейнеров, а не самих svg внутри этих контейнеров.
2) у вас есть небольшие проблемы с пониманием того, как работает viewBox. 3 и 4 значением свойства задаются ширина и высота svg элемента. Но т.к. у svg нет как таковой ширины и высоты, т.к. это векторная графика, то это больше соотношение ширины ии высоты + их дефолтные значения для ширины равной 100%. Более того, внутренние элементы svg (у вас - path в обоих случаях) начинают свой отсчет координат от верхнего левого угла svg, соответственно, чтобы они полностью поместили в svg контейнер, нужно, чтобы сам контейнер удовлетворял соотношениям сторон, которые были использованы при создании svg-элементов.
Лучший выход:
1) Задайте для body
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
Это позволит нормально расположить див - контейнеры svg.
2) Задайте самим дивам относительное позиционирование:
#buttom {
position: relative;
}
#top {
position: relative;
}
3) Добавьте svg элементам классы
class="top" и
class="bottom"
4) Задайте классам следующие стили, чтобы расположить их внутри див-контейнеров:
.top {
position: absolute;
width: 60%;
right: 0;
}
.bottom {
position: absolute;
bottom: 0;
}
5) Измените viewBox для обоих svg согласно соотношениям их сторон:
<!-- Для примера на моем фидле использовано именно такое значение.
Вообще соотношение ~ равно 5,2 к 1, расчитать можете его делением ширины на высота
(или наоборот, как вам удобно) -->
<svg class="top" viewBox="0 0 690 133" > ...
<!-- примерно 7,2 к 1 -->
<svg class="bottom" viewBox="0 0 1170 163" > ...
Пример тут:
https://jsfiddle.net/ned4ded/jbw09skj/3/
Надеюсь, я понял вас правильно и вы имели ввиду именно ресайз svg элементов в зависимости от ширины страницы. Чтобы посмотреть функционирование - сократите ширину iframe элемента с отображением результата
