Figma导出的SVG在网页中显示变形怎么办？

这个问题挺常见的，我来帮你排查一下。

首先，你提到的两种用法其实都有可能出问题，原因不太一样。

第一种：img标签引入

如果用img标签显示变形，大概率是SVG文件本身的问题。你打开导出的SVG文件，看看有没有类似这样的属性：



这里有个坑：Figma有时候导出的width和height是具体数值，不是百分比。你需要改成这样：



或者干脆把width和height删掉，只保留viewBox，这样浏览器会自动根据父容器大小缩放。

第二种：inline SVG变形

这个情况稍微复杂一些。你在Figma里画的图形，如果有旋转、缩放这些操作，Figma导出时可能会在SVG里加一些transform属性，导致显示异常。

你可以检查一下导出的SVG代码里有没有类似这样的东西：



如果有transform，删掉它，然后手动调整path的坐标数据。或者在Figma里把图形"打平"（flatten）后再导出。

还有一个常见坑：

有些图标在Figma里看起来是正圆，但导出后path数据本身就是椭圆形的坐标。这种情况你需要在Figma里检查一下原始图形是不是真的有变形，或者导出前把图形重置一下。

最直接的排查方法：

用浏览器开发者工具，在Elements面板里找到这个SVG，看看Computed（计算后）的样式里，width和height的实际值是多少，viewBox的比例对不对。如果viewBox是"0 0 24 24"但实际显示的宽高比例不对，那就肯定是SVG本身的问题。

你先按我说的检查一下，看看具体是哪种情况，有问题再贴代码出来帮你改。

试试这个：导出SVG时取消勾选「Responsive - SVG」，手动在SVG标签加 viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"。Figma导出的viewBox可能带小数导致缩放异常，改成整数比例。inline SVG的话检查是否有transform属性残留，删掉transform属性试试。