Figma导出SVG出现多余描点问题求助

我为名为Ducky的小组制作Logo，从Figma导出SVG时，特定路径的描边出现了一个多余的小点。

效果对比 #

• 导出SVG后的多余点效果：
  

• Figma中的预期效果：
  

导出的SVG代码 #

<svg width="33" height="38" viewBox="0 0 33 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.4874 5.96259C29.185 4.56022 28.3062 3.5063 27.0896 2.95241C26.005 2.4586 24.8396 2.44183 23.8865 2.56268C21.9671 2.80607 19.8967 3.73641 18.2979 4.85872C18.1219 4.98229 17.613 5.20669 16.6039 5.39113C15.6562 5.56436 14.4991 5.66288 13.2344 5.7034C10.7078 5.78434 8.0053 5.62774 6.16576 5.5055C5.32871 5.44988 4.51956 5.81779 4.01123 6.48514C3.50291 7.15249 3.36318 8.0303 3.63917 8.8225C4.71631 11.9142 5.5 15.2666 5.5 18.5C5.5 23.1366 4.75649 27.3225 2.81385 30.8244C2.33564 31.6865 2.40866 32.7491 3.0003 33.5376C3.59194 34.3261 4.59172 34.6933 5.55309 34.4752C10.7908 33.287 17.524 30.4418 22.595 25.8288C27.7383 21.1501 31.3214 14.4693 29.4874 5.96259ZM29.4874 5.96259L27.0483 6.48844L29.4874 5.96258C29.4874 5.96258 29.4874 5.96259 29.4874 5.96259Z" fill="url(#paint0_linear_43_112)" stroke="#63310E" stroke-width="5" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_43_112" x1="16.2359" y1="5" x2="16.2359" y2="32.0372" gradientUnits="userSpaceOnUse">
<stop stop-color="#E76B13"/>
<stop offset="1" stop-color="#813C0B"/>
</linearGradient>
</defs>
</svg>

解决方案 #

问题出在路径末尾的冗余代码段：ZM29.4874 5.96259L27.0483 6.48844L29.4874 5.96258C29.4874 5.96258 29.4874 5.96259 29.4874 5.96259Z，这段是重复的极短闭合路径，描边后就显示为多余的小点。

删除这段冗余代码后，SVG就能和Figma中的效果一致。修改后的代码如下：

<svg width="33" height="38" viewBox="0 0 33 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.4874 5.96259C29.185 4.56022 28.3062 3.5063 27.0896 2.95241C26.005 2.4586 24.8396 2.44183 23.8865 2.56268C21.9671 2.80607 19.8967 3.73641 18.2979 4.85872C18.1219 4.98229 17.613 5.20669 16.6039 5.39113C15.6562 5.56436 14.4991 5.66288 13.2344 5.7034C10.7078 5.78434 8.0053 5.62774 6.16576 5.5055C5.32871 5.44988 4.51956 5.81779 4.01123 6.48514C3.50291 7.15249 3.36318 8.0303 3.63917 8.8225C4.71631 11.9142 5.5 15.2666 5.5 18.5C5.5 23.1366 4.75649 27.3225 2.81385 30.8244C2.33564 31.6865 2.40866 32.7491 3.0003 33.5376C3.59194 34.3261 4.59172 34.6933 5.55309 34.4752C10.7908 33.287 17.524 30.4418 22.595 25.8288C27.7383 21.1501 31.3214 14.4693 29.4874 5.96259Z" fill="url(#paint0_linear_43_112)" stroke="#63310E" stroke-width="5" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_43_112" x1="16.2359" y1="5" x2="16.2359" y2="32.0372" gradientUnits="userSpaceOnUse">
<stop stop-color="#E76B13"/>
<stop offset="1" stop-color="#813C0B"/>
</linearGradient>
</defs>
</svg>

说明 #

Figma导出SVG时偶尔会生成这类冗余的路径片段，通常是因为路径节点的重复或闭合处理逻辑导致的。删除这段无效的短路径后，描边效果就会和Figma中完全一致。

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