Помощь по макету React: не могу добиться, чтобы мои SVG имели заданный размер и при этом были отзывчивыми. ⇐ CSS

[Anonymous]

Я пытаюсь разработать веб-сайт с использованием Gatsby и React (однако этот вопрос касается React).
Я новичок в веб-разработке, поэтому пытаюсь разобраться в некоторых основах.
Моя проблема связана с целевой страницей. Я сделал два файла SVG. Я хотел бы использовать их на целевой странице (текст и логотип), но не могу правильно определить их размер и одновременно сделать их отзывчивыми.
Изображение того, как я хочу, чтобы страница выглядела


Причина Я использую SVG, потому что написал небольшой фрагмент JS, который анимирует героя при открытии страницы.
Я прочитал много вопросов о переполнении стека о том, как сделать SVG отзывчивым с помощью атрибута viewBox, но не могу понять, как установить размер двух SVG, не лишая его адаптивности. Итак, на странице есть только два огромных SVG, занимающих всю область просмотра. Даже когда я пытаюсь указать ширину SVG-файлов, на меньших экранах они обрезаются, а не уменьшаются.
Проблема, которую я заметил, заключается в том, что если я встраиваю два SVG-файла в div, если я перехожу к проверке этого div, то его высота равна 0 и он находится в верхнем левом углу, а SVG-файлы располагаются далеко посередине страницы, как и они.
Я использую Bootstrap 4 и имею небольшую панель навигации вверху, которую, похоже, все игнорируют (например, мой div, похоже, волей-неволей идет за панелью навигации).
Ниже приведена структура кода, которую я использую для рендеринга (через компоненты React):

Код: Выделить всё

CSS для SVG:

Код: Выделить всё

#svg-hero-container {
display: inline-block;
position: relative;
height: 200px;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}

#svg1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}

#svg2 {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}

Код: Выделить всё

...



...

Будем благодарны за любые советы.
Вот действующий сайт, на котором я нахожусь: https://emmarose.netlify.com/
Вот репозиторий GitHub на случай, если моего кода недостаточно: https://github.com/eduardoRubioG/emrose-cslate

Подробнее здесь: https://stackoverflow.com/questions/607 ... responsive