如何在Illustrator导出类似Bootstrap的单元素SVG图标而非分离元素

我使用Illustrator的「文件>导出为>SVG格式」导出图标时，得到的SVG包含多个分离的<rect>元素（如下方代码），但Bootstrap的SVG图标是单个<path>元素。请问怎么设置才能导出这种单元素的SVG？

我的导出结果（多rect元素） #

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.44 71.99">
  <rect x="1.6" y=".5" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
  <rect x=".5" y="28.63" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
  <rect x=".5" y="54.79" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
</svg>

Bootstrap单Path示例 #

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-square-fill" viewBox="0 0 16 16">
  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm7.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z"/>
</svg>

解决步骤 #

要导出单元素SVG，需先将多个形状合并为单个复合路径，再执行导出：

1. 选中所有目标形状：案例中即三个带圆角的矩形。
2. 建立复合路径：
   • 快捷键：Ctrl+8（Windows）/Cmd+8（Mac）；
   • 菜单操作：「对象 > 复合路径 > 建立」。

   注意：若形状填充/描边属性不一致，合并前需统一设置，否则复合路径会保留属性差异，导出后可能出现显示异常。你的三个矩形属性一致，可直接合并。

3. 导出SVG：
   • 执行「文件 > 导出 > 导出为」，选择SVG格式；
   • 在导出设置面板中，勾选「将Illustrator效果转换为SVG」，并根据需求选择「内联样式」或「属性」作为SVG代码样式；
   • 点击导出后，生成的SVG将包含单个<path>元素。

额外优化建议 #

• 合并后可检查路径有效性：若需镂空效果，可调整路径方向（执行「对象 > 复合路径 > 释放」可撤销合并操作）；
• 简化SVG代码：在导出设置的「更多选项」中，降低「精度」数值（如设为2），减少路径节点数量；
• 移除冗余信息：导出前删除多余图层，或取消勾选「保留Illustrator编辑功能」，避免生成id、data-name等不必要属性。

内容的提问来源于stack exchange，提问作者Myszon