如何减小SVG图标的线条粗细？附代码求助

你的SVG是通过填充闭合路径来呈现形状的，没有使用描边（stroke）属性，所以要实现“线条变细”，本质是对填充的形状进行向内收缩，以下是两种可行方法：

方法一：使用SVG滤镜快速收缩形状 #

这是最简单的方法，无需修改原始路径数据：

• 在SVG顶部添加<filter>定义，用feMorphology滤镜的erode模式缩小形状，radius值控制收缩程度，值越大轮廓越细
• 给填充形状的<g>或<path>添加filter="url(#thinShape)"属性应用滤镜

修改后的SVG代码 #

<?xml version="1.0" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1202.000000pt" height="1202.000000pt" viewBox="0 0 1202.000000 1202.000000"
 preserveAspectRatio="xMidYMid meet">
  <!-- 定义收缩滤镜，radius值可调整控制粗细 -->
  <filter id="thinShape" x="-50%" y="-50%" width="200%" height="200%">
    <feMorphology operator="erode" radius="20"/>
  </filter>

<g transform="translate(0.000000,1202.000000) scale(0.100000,-0.100000)"
fill="#FFFFFF" filter="url(#thinShape)">
<path d="M875 11990 c-225 -34 -454 -163 -601 -338 -117 -139 -200 -307 -240
-487 -14 -63 -18 -121 -17 -275 6 -929 302 -1795 836 -2440 332 -401 809 -757
1171 -875 197 -64 443 -89 632 -65 54 6 470 97 924 201 1085 249 1271 281
1645 282 377 0 643 -63 872 -209 81 -51 233 -164 233 -174 0 -4 -25 -24 -55
-44 -176 -116 -274 -293 -262 -473 4 -71 20 -129 122 -430 66 -198 130 -371
148 -402 65 -109 189 -194 332 -227 39 -9 80 -19 92 -23 l23 -6 -31 -45 c-77
-114 -145 -282 -170 -420 -17 -94 -14 -280 6 -375 52 -247 223 -489 458 -646
118 -79 169 -104 406 -200 487 -199 649 -314 856 -604 132 -186 207 -334 239
-472 39 -173 18 -255 -158 -608 -193 -387 -256 -560 -303 -830 -27 -156 -24
-458 6 -595 58 -270 165 -481 336 -659 279 -291 656 -457 1197 -527 165 -21
945 -32 1086 -15 563 69 1032 478 1240 1081 128 374 145 735 56 1248 -98 570
-383 1639 -761 2857 -344 1108 -878 2693 -1132 3357 -33 85 -41 120 -41 170
l0 63 122 65 c540 288 807 565 858 890 8 54 10 267 8 750 l-4 675 -26 95 c-85
311 -266 511 -574 633 -107 43 -281 82 -423 97 -121 12 -9025 12 -9106 0z
m8925 -1000 c69 -5 144 -13 168 -16 l42 -6 0 -508 c0 -470 -1 -508 -17 -523
-18 -15 -163 -43 -968 -187 -187 -34 -551 -99 -810 -146 -674 -121 -1283 -231
-1800 -324 -247 -44 -508 -92 -580 -105 -71 -13 -247 -45 -390 -70 -143 -26
-368 -66 -500 -90 -132 -24 -307 -56 -390 -70 -228 -40 -372 -70 -658 -136
-144 -33 -359 -82 -477 -109 -964 -221 -917 -213 -1032 -189 -70 14 -206 83
-343 174 -561 371 -896 964 -1000 1771 -14 108 -34 407 -35 507 l0 37 4333 0
c2680 0 4380 -4 4457 -10z m-779 -2370 c9 -140 34 -242 118 -461 197 -521 578
-1630 854 -2489 575 -1784 897 -2972 996 -3682 43 -304 17 -531 -81 -721 -71
-136 -186 -230 -318 -258 -81 -17 -835 -6 -969 15 -218 34 -397 101 -493 186
-128 112 -152 312 -68 562 16 48 81 197 145 332 176 374 232 521 270 709 74
369 22 708 -166 1086 -170 341 -428 676 -673 873 -199 161 -339 242 -728 422
-134 62 -276 130 -315 152 l-73 40 66 95 c151 217 270 442 333 626 145 424
107 881 -110 1320 -124 252 -298 482 -569 754 l-196 196 291 52 c159 29 515
93 790 142 275 50 581 105 680 124 99 18 187 33 195 32 12 -2 16 -25 21 -107z"/>
</g>
</svg>

方法二：转换为描边路径（精确控制） #

如果需要更精准的线条粗细，可将填充形状改为描边轮廓：

1. 移除<g>或<path>的fill="#FFFFFF"属性
2. 添加stroke="#FFFFFF"、stroke-width="数值"（数值越小线条越细）
3. 补充stroke-linejoin="round"和stroke-linecap="round"，保持原形状的圆角过渡

示例路径属性：

<path d="..." stroke="#FFFFFF" stroke-width="30" stroke-linejoin="round" stroke-linecap="round" fill="none"/>

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