¿Cómo puedo crear un cuerpo a partir de múltiples svg, de modo que al final tenga un svg con otro colocado encima como parte del svg más grande?

Ahora tengo dos svgs aquí: https://codepen.io/m42444/pen/eYVEbOq Quiero que la "H" quede fija en el svg grande.

¡Gracias por cualquier ayuda!

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