svg:如何将多个path,rect合并成一个path?

Question

在网上下载的svg图标，在xd中直接填充就可修改相应的颜色，如且图标很复杂，但只有一个path节点，
这个是网上下载的：

下面是我用ai制作的，已经合并路径并轮廓化描边：
原始的样子

直接修改填充色的样子：

网上下载的svg的代码：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="58.547" viewBox="0 0 50 58.547">
  <path id="联合_1" data-name="联合 1" d="M-1658.173,58.547A3.811,3.811,0,0,1-1662,54.762V8.789c0-2.3,1.433-3.973,3.406-3.973h21.441a1.67,1.67,0,0,1,1.668,1.667,1.67,1.67,0,0,1-1.668,1.668h-21.393a1.54,1.54,0,0,0-.118.639V54.762a.462.462,0,0,0,.492.45h36.636a1.284,1.284,0,0,0,.375-.042V25.882a1.67,1.67,0,0,1,1.668-1.668,1.67,1.67,0,0,1,1.668,1.668v29.26a3.377,3.377,0,0,1-3.71,3.4Zm5.66-10.426a1.669,1.669,0,0,1-1.668-1.668,1.669,1.669,0,0,1,1.668-1.668h25.2a1.67,1.67,0,0,1,1.668,1.668,1.67,1.67,0,0,1-1.668,1.668Zm0-9.558a1.669,1.669,0,0,1-1.668-1.668,1.669,1.669,0,0,1,1.668-1.668h25.2a1.67,1.67,0,0,1,1.668,1.668,1.67,1.67,0,0,1-1.668,1.668Zm0-10.427a1.669,1.669,0,0,1-1.668-1.668,1.669,1.669,0,0,1,1.668-1.668h25.2a1.67,1.67,0,0,1,1.668,1.668,1.67,1.67,0,0,1-1.668,1.668Zm28.929-5.1a11.464,11.464,0,0,1-11.449-11.379A11.53,11.53,0,0,1-1623.653,0l.14,0a11.434,11.434,0,0,1,8.043,3.278,11.447,11.447,0,0,1,3.469,8.1,11.528,11.528,0,0,1-11.379,11.651ZM-1629.9,5.522a8.7,8.7,0,0,0-2.495,6.23,8.781,8.781,0,0,0,8.768,8.663,8.792,8.792,0,0,0,8.878-8.768,8.779,8.779,0,0,0-8.768-8.769h-.217A8.713,8.713,0,0,0-1629.9,5.522Zm-22.608,13.055a1.669,1.669,0,0,1-1.668-1.667,1.669,1.669,0,0,1,1.668-1.668h13.034a1.669,1.669,0,0,1,1.667,1.668,1.669,1.669,0,0,1-1.668,1.667Zm28.852-4.7a1.18,1.18,0,0,1-1.177-1.163V6.152a1.321,1.321,0,0,1,1.32-1.279,1.32,1.32,0,0,1,1.319,1.279v5.1h3.317a1.309,1.309,0,0,1,1.309,1.309,1.309,1.309,0,0,1-1.309,1.309Z" transform="translate(1662 0)" fill="#e31919"/>
</svg>

我制作的svg代码：

<svg xmlns="http://www.w3.org/2000/svg" width="37.091" height="48.275" viewBox="0 0 37.091 48.275">
  <g id="组_61" data-name="组 61" transform="translate(-40.455 -22.5)">
    <path id="路径_39" data-name="路径 39" d="M111.748,27.5a7.894,7.894,0,1,0,7.894,7.894A7.9,7.9,0,0,0,111.748,27.5Zm.816,8.636h-.142v.141h-6.087V34.72h4.672V28.632h1.557Z" transform="translate(-43.653 -3.443)" fill="#cca60d"/>
    <path id="路径_40" data-name="路径 40" d="M72.166,71.338A4.645,4.645,0,0,1,67.543,76.1H46.919a4.9,4.9,0,0,1-4.906-4.765V38.822a4.9,4.9,0,0,1,4.906-4.765H57.726V32.5H46.919a6.479,6.479,0,0,0-6.464,6.322V71.338a6.479,6.479,0,0,0,6.464,6.322H67.543a6.186,6.186,0,0,0,6.18-6.322V49.913H72.166Z" transform="translate(0 -6.885)" fill="#cca60d"/>
    <path id="路径_41" data-name="路径 41" d="M108.3,22.5a9.451,9.451,0,1,0,9.452,9.451A9.462,9.462,0,0,0,108.3,22.5Zm0,17.345a7.894,7.894,0,1,1,7.894-7.894A7.9,7.9,0,0,1,108.3,39.845Z" transform="translate(-40.211)" fill="#cca60d"/>
    <path id="路径_42" data-name="路径 42" d="M116.49,37.224h-4.672v1.557h6.087v-.141h.142v-7.5H116.49Z" transform="translate(-49.137 -5.946)" fill="#cca60d"/>
    <rect id="矩形_54" data-name="矩形 54" width="10.335" height="1.557" transform="translate(45.693 38.073)" fill="#cca60d"/>
    <rect id="矩形_55" data-name="矩形 55" width="22.51" height="1.557" transform="translate(45.693 47.133)" fill="#cca60d"/>
    <rect id="矩形_56" data-name="矩形 56" width="22.51" height="1.557" transform="translate(45.693 57.043)" fill="#cca60d"/>
  </g>
</svg>

我知道问题出在我的svg图标有多个path和rect造成的，我的问题是：如何将多个path,rect合并成一个path?
谢谢

Answer 1

这是因为你在使用工具绘制SVG图形的时候，有很多图层或者形状，并不是一笔绘制完成的。
解决方案可以使用 svgo 来优化你的图标，但是并不是所有情况都可以自动优化，需要自己写优化程序，比如下面是我为我们公司写的优化工具：

另外有一个在线工具：https://jakearchibald.github....