How can I create a body out of multiple svgs, so in the end I have one Svg with another one placed on top of it as part of the bigger svg?

By now I have two svgs here: https://codepen.io/m42444/pen/eYVEbOq I want the "H" to sit fixed on the big svg.

Thanks for any help!

const vertexSets = [],
firstColor = '#F9420B';
secondColor = '#009245';


  $('#svgOne').find('path').each(function(i, path){
    
    var svgOne = Bodies.fromVertices(percentX(80), percentY(30), Matter.Vertices.scale(Svg.pathToVertices(path, 10), (window.innerWidth / 2000), (window.innerWidth / 2000)), {
      render: {
        fillStyle: firstColor,
        strokeStyle: firstColor,
        lineWidth: 1
      }
    }, true);
    
  vertexSets.push(svgOne);
    console.log(vertexSets)

  });

  $('#svgTwo').find('path').each(function(i, path){
    
    var svgTwo = Bodies.fromVertices(percentX(80), percentY(30), Matter.Vertices.scale(Svg.pathToVertices(path, 10), (window.innerWidth / 2000), (window.innerWidth / 2000)), {
      render: {
        fillStyle: secondColor,
        strokeStyle: secondColor,
        lineWidth: 1
      }
    }, true);
    
  vertexSets.push(svgTwo);
    
  });