在 html 中显示 svg 时出现问题

问：

我一直在做一个项目一段时间，该项目部分显示了我用 http://svgeditoronline.com/ 制作的 4 个 svg。但是出于某种原因，当我尝试显示最后 3 个 svg 时，由于缺乏更好的词，它看起来不对。第一个看起来还不错。

这是我写的html和css

<button class="Button" onclick="RunApp(A_Settings)">
    <img class="Button-icon" src="Resources/Settings.svg" />
</button>

.Button {
    height: 85%;
    aspect-ratio: 1/1;
    margin-top: 0.25%;
    margin-bottom: 0.25%;
    margin-left: 0.50%;
    transition: all 0.3s ease-in-out;
    border: 5px solid black;
    border-radius: 10px;
}

.Button:hover {
    transform: scale(1.1);
}

.Button-icon {
    height: 90%;
    aspect-ratio: 1/1;
    margin-top: 0.25%;
    margin-bottom: 0.25%;
}

它应该是什么样子 它看起来如何

为了提供一些上下文，我正在使用 Replit 处理这个项目，但我也通过在本地加载 HTML 文件来测试代码，结果相同。另外，如果它有帮助，这里是 svg 代码：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="375" height="375" viewBox="0 0 375 375" xml:space="preserve">
<desc>Created with Fabric.js 3.6.6</desc>
<defs>
</defs>
<g transform="matrix(3.19 0 0 3.19 187.99 187.99)"  >
<polygon style="stroke: rgb(0,0,0); stroke-width: 22; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 4; fill: rgb(189,189,61); fill-opacity: 0; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  points="-50,-50 -50,50 50,50 50,-50 " />
</g>
<g transform="matrix(0.57 0.56 -0.56 0.57 104.59 91.86)"  >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.59 -0.54 0.54 0.59 104.55 140.67)"  >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.8 -0.01 0.01 0.8 211.04 163.61)"  >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
</svg>

感谢您提供的任何帮助（并可能反驳本网站的不良声誉）

我尝试了诸如重新制作svg和使用更具体的样式之类的方法。