Skip to main content
Moein_Rabti
January 18, 2023
Question

How to forced to export SVGs with stroke?

  • January 18, 2023
  • 5 replies
  • 4487 views

Hello, community
I am creating an icon set, and I want to deliver it to the development team in SVG format.
The problem I faced is that some SVG codes export with the stroke that I want, but some export as a filled one (it seems that Figma first use outline stroke then export it)
You can see two different icon svg file

This topic has been closed for replies.

5 replies

Tyler_Trotter
March 28, 2023

Yeah, this is super annoying. It’s real finnicky though. If you are able to put the individual parts of your icon on their own layers it might export like you want. I needed mine to all be flattened and was able to get it to work by flattening one part and then the whole icon. It’s super weird.

Yehia
March 28, 2023

Have you made a union of any of these stroked elements?
Figma will convert any union elements, even if they are strokes, to fills.
Workaround might be to simply group these stroked elements together in one group, and try to export then.

April 29, 2024

I ran into a similar issue, when trying to export a single line. It turned out to be caused by the fact that one of the line-ending points was set to “round”, and the other one to “none”.

In order to export this very long “U”-shaped stroke, Figma had to convert it into a shape (without a stroke).

April 29, 2024

The fix was to separate the line in two: one with “line-ending: round” on both sides slightly overlapping another one with “line-ending: none” on both sides.

honza.gal
New Member
March 13, 2025

@Yoannis_Jamar Thank you for sharing! I had the same issue and round the line solved it.