为何Figma中未加non-scaling-stroke的SVG描边缩放时宽度不变？

我的优化案例 #

作为SVG新手，我正在学习SVG优化，针对线条类图形做了如下优化：

旧填充型SVG #

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
  fill="black" stroke="none">
  <path d="M 24,39.51A 2.29,2.29 43.71 0 1 22.24,37.9L 7.67,9.73A 1.56,1.56 105.76 0 1 8.25,7.68 1.56,1.56 19.93 0 1 10.4,8.46L 24,34.74 37.66,8.35a 1.53,1.53 162.36 0 1 2.06,-0.65c 0.72,0.37 0.99,1.29 0.61,2.04 -5.08,9.9 -9.84,19.02 -14.98,28.93 -0.25,0.48 -0.89,0.86 -1.43,0.84z"/>
</svg>

优化后描边型SVG #

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
fill="none" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
  <path d="M 9,9 24,38 39,9"/>
</svg>

注：二者视觉效果完全一致

优化总结 #

• 线条类图形优先用stroke替代fill：描边路径锚点更少，代码更简洁易维护
• 体积优化显著：从380B压缩至189B，缩减约50%，画质未受影响

遇到的Figma缩放问题 #

在浏览器中放大两个SVG，显示效果一致；但在Figma里情况不同：

• 原填充版本SVG缩放时，线条宽度会自适应调整
• 优化后的描边版本SVG缩放时，描边宽度保持固定（我没有添加vector-effect="non-scaling-stroke"属性）

我原本预期描边宽度会随缩放比例同步变化，比如32x32尺寸时宽度为2，128x128尺寸时自动调整为8，但Figma并未按这个逻辑计算描边宽度，实在搞不懂原因。

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