Skip to main content
Solved

How to export SVG Path?

  • March 26, 2021
  • 5 replies
  • 19485 views

Fractal_HQ

Hey! 👋 I have a path that looks like this in Figma:

FigmaPath

But when I export it, I’m given this instead:

Is there any way to export the actual path, instead of a new flattened shape?

Thanks in advanced!!

Best answer by tank666

Hi @Fractal_HQ! I did some tinkering and found that if the arrowhead is hand drawn (drawn with a pen), the contour (outline) will be displayed in the SVG path editor.

If an arrowhead is added via Advanced stroke in Figma, then in the above editor it will be a stroke.

If you remove the arrowhead from the Advanced stroke and draw it with a pen, it will still be a stroke in the editor. And if you remove the stroke and add it again, it will be a contour.

Therefore, in order for your path to be a contour, you don’t need to use Advanced stroke on any of the steps.

Let me know if you don’t understand.

Figma – 27 Mar 21
View original

5 replies

Fractal_HQ
  • Author
  • 4 replies
  • March 26, 2021

For reference- this is the same path exported from Penpot


Gleb
  • Power Member
  • 4707 replies
  • March 27, 2021

It seems like the software you are using to open it does this. I just tried exporting a similar path and it exports correctly as stroke, not the outline.


Fractal_HQ
  • Author
  • 4 replies
  • March 27, 2021

Hey @Gleb! I actually just copied the path from the d="..." field in the .svg file exported by Figma and pasted it into the path field in svg-path-editor. So it was definitely the same path that Figma gave me.

Strange 🤔


tank666
  • 4868 replies
  • Answer
  • March 27, 2021

Hi @Fractal_HQ! I did some tinkering and found that if the arrowhead is hand drawn (drawn with a pen), the contour (outline) will be displayed in the SVG path editor.

If an arrowhead is added via Advanced stroke in Figma, then in the above editor it will be a stroke.

If you remove the arrowhead from the Advanced stroke and draw it with a pen, it will still be a stroke in the editor. And if you remove the stroke and add it again, it will be a contour.

Therefore, in order for your path to be a contour, you don’t need to use Advanced stroke on any of the steps.

Let me know if you don’t understand.

Figma – 27 Mar 21

Fractal_HQ
  • Author
  • 4 replies
  • March 28, 2021

Ahhh! Great detective work! I must have done the second method. Method 3 is an interesting hack. I’ll probably try to stick to the Pen tool in the future. Thanks for the great breakdown!

I wonder if this is an intended feature, or if it warrants a bug report.

Either way, this is insightful, and the remove stroke - add fill - remove fill - add stroke hack will probably come in handy at some point.

Thank you!!


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