我有以下svg组件。我想水平和垂直堆叠多个相同的svg组件，以在网格中生成更大的svg图像。
我可以将它们堆叠在一起，但是如何将其转换为svg？
请提出建议，如果有任何我可以使用的软件包。谢谢。
SVG组件
import React from "react";
import "./styles.css";
export default function MySVG() {
return (
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
<defs/>
<g/>
<g transform="scale(1,1)">
<g transform="scale(1,1)">
<rect id="cell" fill="rgb(16,28,138)" stroke="none" x="0" y="0" width="40" height="40" fill-opacity="0.40784313725490196"/>
</g>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 0 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 40 0 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 40 0" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 40 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
);
}
应用组件
import React from "react";
import MySVG from "./MySVG";
import "./styles.css";
export default function App() {
return [...Array(5).keys()].map((i) => <MySVG key={i} />);
}