If you’re looking to create an SVG with a path rather than a group of shapes, this post it for you.
Why would you want this?
Paths in SVG are easier for developers to manipulate and style. The problem is that when exporting SVGs from Figma, they often come out as groups.
Here’s an example:
See how on the left-hand side of the Figma file, it’s made of up of a circle and two diagonal crosses.
The problem is that when you need to style it in code, we can’t simply style the grey part of the icon as there is no detailed path of the whole icon. It’s made up of the circle and two paths. It also means the diagonal lines are not transparent.
So here’s how I solved this problem. Firstly, I ungrouped the whole thing.
Then to make the x transparent and make the whole icon one clean shape, I selected both the lines (together) and the circle, then subtracted the selection.
Now you have one solid path to work from.
Now once you export the icon in SVG format, the code will reflect the path and the developers can then edit the colour of the path and not affect the x in the middle.
If you need any help, comment below.
Stay informed,
