I’m facing an issue with exported SVG files from Figma. I designed a button with smooth rounded edges that looks great in the Figma app. The export as a PNG retains those nice rounded corners perfectly.
However, when I switch to exporting it as an SVG file, the rounded corners end up looking jagged and uneven instead. Even when I zoom in on it, the curves don’t maintain their smoothness.
Has anyone encountered a similar problem with SVG exports in Figma? Is there a way to preserve the rounded borders when saving in SVG format? I really need the benefits of SVG but the quality isn’t good with the current output.
i’ve faced this too! sometimes increasing the svg export quality in figma helps, or make sure you’re using a good browser for viewing it. it’s often just how svgs are rendered by some apps, not figma’s issue.
Had this exact problem when working on icon sets for web projects. The root cause is typically Figma’s SVG optimization which can simplify curves too aggressively. Try unchecking “Simplify stroke” in the export options before downloading your SVG. Also worth checking if your rounded rectangles have been converted to paths properly - sometimes keeping them as shape objects with corner radius causes export issues. I found that flattening complex shapes before export helps maintain curve quality. Another workaround is exporting at 2x resolution then scaling down in your implementation, which often preserves the smoothness better than direct 1x exports.
This happened to me on a client project last month and it drove me crazy for hours. The issue is usually related to how Figma converts the border-radius properties to SVG path data. What worked for me was switching from using corner radius on rectangles to actually drawing the shape with the pen tool using bezier curves. It takes a bit more time but the SVG export maintains perfect smoothness since you’re controlling the actual path points rather than relying on Figma’s automatic conversion. Another thing that helped was making sure my shapes were positioned on whole pixel values before exporting, as sub-pixel positioning can cause rendering issues in SVGs.
try using outline stroke instead of inside/outside stroke before exporting - this fixed it for me when nothing else worked. also check if anti-aliasing is enabled in your browser when viewing the svg file