When I import an svg from illustrator it loses its stroke

Is there any solution to the following problem?
When I import an svg from illustrator it loses its stroke and is divided into two shapes, one is the fill and one is the stroke.

I would like to be able to import the shape with the editable stroke as created in illustrator.

I attach screen below.


Screenshot 2024-07-03 alle 17.35.52

Instead, I would like to have a shape like this automatically when I import the svg into Figma.

Hi @Apptoyou, Thank you for reaching out about this. I appreciate you sharing the screenshots.

I observed that there is a note regarding SVG import in Add images and videos to design files, but I am uncertain if this behavior is intentional or a bug.

As we await input from our community, I have contacted our internal team to check this behavior further. We’ll provide an update once we have more information.

If any members of our community have additional insights on this issue, please feel free to share them here.

Thank you!

1 Like

Hi @Junko3, For the interest of the community, I solved it by setting the stroke to the center of the shape in Illustrator.

This is the only solution I found to have it correctly interpreted as a stroke by Figma.

Best regards

1 Like

Hi @Apptoyou, It’s great to know that you have successfully addressed the problem. We would also like to extend our thanks for your valuable input.
Your contributions to the community are greatly valued!

1 Like

When you copy out of Illustrator, it copies as an SVG, and unfortunately a feature limitation of SVG is that it has no concept of stroke alignment; it only supports center-aligned strokes. So when you copy/export an SVG out of either Illustrator or Figma with an inside- or outside-aligned stroke, it has to copy the stroke as an outlined fill.

2 Likes