Axure morphs icons when converting SVG to shapes

When converting SVG to shapes from the Transform image feature in Axure, it is morphing the shape of the icon.
Original Icon
52%20AM
Axure Converted icon
50%20AM

Could be janky SVG code? Was the SVG exported via Illustrator? Downloaded off the web? SVG export from Photoshop? Is this the only icon you’ve had this issue with? I’d re-export with Illustrator, but if you don’t have Illustrator, maybe an online SVG optimization site.

It seems to be happening with any curved icons downloaded directly from https://icons8.com/
But I will try re-exporting through Illustrator and see if it helps. Thanks for the tip

I’ve seen similar effects with some icons, particularly if there are clipping paths and masks in the source Illustrator file (which is likely in the example you show.) Lots of ways that graphics designers kind of “cheat” to create visual effects, which usually doesn’t matter if they are output as raster graphics or the SVG doesn’t ever get manipulated.

The source file should be a simple and clean as possible, as “Convert to Shapes” feature will basically pull out the individual components/layers and group them as a set of shapes. Try to apply all clippling masks, delete all guides, hidden layers, etc. if you can.

2 Likes

I flattened the layers in Illustrator and converted the shape to outlines. Now when I convert the SVG to shapes in Axure, it works beautifully! Thank you both for your help.

1 Like