I’m working on some animated projects and I design all my graphics in Figma first. The problem I keep running into is that when I export my designs as SVG files, the paths aren’t there anymore. This makes it impossible for me to add hover effects or click events to my shapes like triangles, rectangles, and circles. I’ve gone through all the export settings in Figma but nothing seems to work. Has anyone else dealt with this issue? I really need those path elements to be preserved so I can make my shapes interactive on the web.
Figma often flattens shapes when exporting to SVG, particularly with effects or specific styling applied. A useful approach is to convert shapes to outlines beforehand by selecting the shape and using outline stroke. Additionally, consider utilizing the “Include id attribute” setting in the export panel, as it can help maintain the element structure. If problems persist, try exporting individual elements instead of entire artboards, as grouped elements tend to lose their path data more frequently than simpler standalone shapes.
Ugh, so frustrating! duplicate your shapes b4 exporting and strip out masks or effects from the copies. figma rasterizes anything w/ effects. also try dev mode export instead of regular - it often gives cleaner svg markup that preserves the paths.
Had this exact problem last month building an interactive infographic. Figma’s SVG export optimization merges and simplifies vector data, which breaks things. Turn OFF the “Simplify” option - sounds backwards, but it keeps more path data intact. Also check for boolean operations on your shapes since those get flattened when you export. Another trick that worked: export at higher resolution, then scale down in code. Paths stay intact and clickable areas work properly. You’ll still need to manually tweak the SVG code sometimes, but these steps cut that way down.
totally get it! i’ve had issues like that too. what works for me is just making sure to check the export options thoroughly. grouping might help too, but also sometimes recreating shapes in svg can help keep paths intact.