Skip to main content
Question

How to forced to export SVGs with stroke?

  • January 18, 2023
  • 5 replies
  • 3625 views

Moein_Rabti

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

5 replies

Tyler_Trotter

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
  • 52 replies
  • 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.


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).


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
  • 1 reply
  • March 13, 2025

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


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings