自定义SVG无法像Font Awesome图标填充高度的问题排查

• 原始SVG viewBox范围冗余：原始SVG的viewBox="0 0 720 720"定义了一个远大于实际图形的画布范围，当容器限制高度时，SVG会按整个720x720的比例缩放，导致实际图形仅占容器的一部分，无法填充高度。
• 手动调整viewBox后的偏移问题：你设置的viewBox="109 195 510 330"虽框选了图形区域，但SVG默认的preserveAspectRatio="xMidYMid meet"属性会强制保持viewBox的宽高比，当容器宽高比与viewBox不一致时，就会出现位置偏移或留白。

1. 导出贴合图形的SVG（推荐） #

在Illustrator中重新导出，确保画布贴合图形：

• 选中所有图形元素，执行对象 > 画板 > 适合图稿边界，让画板完全包裹图形。
• 导出SVG时勾选「使用画板」，生成的SVG会自动带有贴合图形的viewBox，避免冗余空白。

2. 手动优化SVG代码 #

修改viewBox并调整preserveAspectRatio属性，适配容器需求：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="109 195 510 330" preserveAspectRatio="xMinYMin meet" xml:space="preserve">
<g>
    <path d="M372.7,463.4c7.7-12.1,13-24.8,16-38.3c3.1-14.9,2.9-29.2-0.4-42.7c-3.4-13.5-9.3-25.2-17.8-34.9
        c8-7.5,14.7-16.1,20.2-25.6s9.5-19.9,12-30.9c2.8-13.3,2.9-25.8,0.3-37.4s-7.3-21.7-14.1-30.4c-6.8-8.7-15.5-15.5-25.9-20.4
        c-10.5-5-22.3-7.4-35.3-7.4H187.1c-3.1,0-5.7,0.9-7.8,2.8c-2.1,1.9-3.5,4.3-4.2,7.4l-65.7,309.7c-0.7,3.3-0.4,5.7,1.1,7.2
        c1.5,1.6,3.7,2.3,6.7,2.3h153.7c13,0,26-2.7,38.8-8c12.9-5.3,24.7-12.5,35.4-21.6S365,475.4,372.7,463.4z M301.3,421.8
        c-1,4.7-2.9,9.3-5.5,13.8c-2.7,4.4-5.9,8.4-9.7,11.9c-3.8,3.5-8,6.2-12.5,8.3c-4.6,2.1-9.3,3.1-14.2,3.1h-51.9l15.8-74.1h51.9
        c4.9,0,9.2,1.1,12.9,3.3c3.7,2.2,6.7,5.1,9,8.5c2.3,3.5,3.8,7.4,4.5,11.9C302.2,412.9,302.2,417.3,301.3,421.8z M317,292.9
        c-1,4.7-2.8,9.1-5.3,13s-5.6,7.3-9.2,10.2c-3.6,2.9-7.7,5.1-12.2,6.7s-9.3,2.3-14.3,2.3h-40.2l13.5-64.3h40.8c4.9,0,9.2,0.9,13,2.6
        s6.8,4,9.2,7c2.4,3,4,6.4,4.8,10.2C317.9,284.3,317.9,288.5,317,292.9z"/>
    <path d="M607.4,366.1H402c1.4,3.9,2.7,7.8,3.7,11.9c4.1,16.2,4.3,33.2,0.6,50.8v0.2c-3.4,15.4-9.6,30.3-18.4,44.1
        c-8.6,13.5-19.1,25.6-31.2,35.8c-7.1,6-14.7,11.3-22.6,15.9h240.3c6.6,0,13.3-6,14.8-13.4l27.4-131.9
        C618.2,372.1,614,366.1,607.4,366.1z M479.6,425.4l-2.5,11.9c-0.3,1.3-0.9,2.4-1.9,3.3s-2.2,1.4-3.5,1.4H461l-11,51.3
        c-0.6,2.6-2.2,3.9-5,3.9h-18c-2.7,0-3.8-1.3-3.2-3.9l11-51.3H424c-3,0-4.2-1.5-3.5-4.6l2.5-11.9c0.6-2.9,2.4-4.4,5.4-4.4h10.7
        l4.1-19.3c0.3-1,0.8-1.9,1.6-2.7c0.8-0.8,1.9-1.3,3.3-1.6l19.5-3c1,0,1.8,0.3,2.2,1c0.5,0.7,0.6,1.6,0.3,2.7l-4.9,22.8h10.7
        c1.3,0,2.2,0.4,2.9,1.1C479.7,422.8,479.9,423.9,479.6,425.4z M572.8,425.3c-0.1,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.1,0.4-0.2,0.6
        l-40.1,64.7c-0.4,0.6-0.7,1.3-1.2,1.9c-0.4,0.7-0.9,1.3-1.4,1.9s-1.1,1.1-1.8,1.5s-1.4,0.6-2.2,0.6h-18.3c-1,0-1.7-0.1-2.1-0.4
        c-0.5-0.3-0.8-0.7-1.1-1.2c-0.3-0.7-0.5-1.4-0.7-2.1s-0.4-1.5-0.5-2.2c-1.9-10.7-4-21.4-6.1-32.1s-4.2-21.4-6.1-32.1
        c-0.1,0-0.1-0.3-0.1-0.7c0-0.4,0-0.8,0.2-1.2c0.4-1.8,1.7-2.7,3.9-2.7h21.8c1.2,0,2.1,0.3,2.7,0.9c0.6,0.6,1,1.4,1.1,2.5
        c0.2,3,0.5,6.4,0.8,10s0.6,7.2,1,10.8c0.3,3.6,0.6,6.9,0.8,10c0.3,3.1,0.4,5.7,0.5,7.6l19.5-38.6c0.7-1.2,1.5-2,2.3-2.5
        s1.8-0.8,3-0.8h21.4c1.4,0,2.3,0.3,2.7,0.8C572.9,423.7,573,424.4,572.8,425.3z"/>
</g>
</svg>

关键属性说明： #

• preserveAspectRatio="xMinYMin meet"：保持宽高比，图形左上角对齐容器左上角，多余空间留白。
• 若需完全填充容器（允许拉伸），改为preserveAspectRatio="none"。
• 若需保持宽高比并填充容器（裁剪多余部分），改为preserveAspectRatio="xMidYMid slice"。

3. 容器样式配合 #

确保SVG所在容器设置明确的尺寸规则：

.icon-container {
  height: 100%; /* 或具体数值 */
  width: auto;
}
.icon-container svg {
  width: 100%;
  height: 100%;
}

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