How to export SVG Path?

Hey! :wave: 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!!

For reference- this is the same path exported from Penpot

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.

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 :thinking:

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.

1 Like

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!!