Weird SVG behaviour with Ionicons


#1

I added the settings-outline icon from https://ionicons.com/ into my project.

In Axure I see this weirdness: (it appears as an image rather than an editable SVG)
axure

In my prototype it looks fine:
prototype

And in Inspect, it appears fine as an SVG:
inspect

Any ideas or solutions to this?


#2

Axure is pretty fickle with SVG files. The source needs to be pretty clean and simplified… When masks, unions, filters used it can look pretty funky in Axure.

For what it’s worth, I tried downloading the “settings-outline.svg” file from that site and while loading the SVG directly in my browser worked fine, all I can see in Axure RP editor is a blank 512x512 SVG widget. When I converted to shapes, I got this error:
image

So, I guess you could send this file to support@axure.com and see if they have an answer.

I tried a few others… None of the “settings” icons worked (Filled, Sharp versions) but the basic ones like “add-outline.svg” did work. I can open “add-outline.svg” in Illustrator, see and edit it, but “settings-outline.svg” in Illustrator just shows one layer with what looks to be a blank path.


#3

Yeah it’s very strange. It doesn’t render properly in Axure or Sketch, but it’s fine in Figma. Then if I export the SVG from Figma and use that in Axure, it looks correct but still appears as an image. But then is downloadable as an SVG in Axure Inspect. And it’s only for some SVGs and not others. :man_shrugging: