I am trying to develop a web site using Gatsby and React (however, this question is about React).

I am new to web development so I am trying to figure out some of the basics.

My issue is with the landing page. I made two SVG's I would like to be a part of the landing page (Text and a Logo) but I can't size them correctly while also making them responsive.

Image of what I want the page to look like

The reason I am using SVG's is because I wrote a little JS piece that animates the hero when you open the page.

I read lots of Stack Overflow questions on making SVGs responsive using the viewBox attribute but I can't figure out how to set the size of the two SVGs without removing its responsive qualities. So, the page just has two huge SVGs spanning the whole viewport. Even when I try and specify the width on the SVGs, they get clipped on smaller screens instead of scaling down.

An issue I noticed is that if I embed the two SVGs in a div, if I go to inspect that div then it has a height of 0 and is in the top left corner and the SVGs are way out in the middle of the page, as they do.

I am using Bootstrap 4 and have a little Navbar at the top that everything seems to be ignoring (as in, my div seems to go behind the Navbar all willy-nilly).

The following is the code structure I am using to render this (through React components):

CSS for SVGs:

#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%);
}

Any advice would be appreciated.

Here is a live site of where I'm at: https://emmarose.netlify.com/

Here is the GitHub repo in case my code isn't sufficient: https://github.com/eduardoRubioG/emrose-cslate