Problem with imported SVG image


#1

I created an SVG image, when I open the SVG directly on a browser, the image is perfect.

But when I import and preview/publish from Axure, the image is messed up.

Some text gets misaligned and drop shadows are gone.


#2

How are you importing from Sketch? Are you using the Copy SVG Code option in Sketch, then pasting in Axure and “Convert SVG to Shapes?” option?


#3

No, I’m importing SVG saved from illustrator. When I have simple icons, it works perfectly fine. Even copy-paste works fine.

But when I have complex svg with complex lines and shapes (in this particular case, a pie chart with numbers), elements within the image lose alignments, like numbers etc.

Also does drop shadow work on axure? When I open the svg on a browser, the image is intact together with the shadows etc. But when I import the image, the dropshadow is out of alignment.


#4

I don’t own illustrator so I haven’t tried importing from there. Unfortunately this means I can’t really help. But it sounds like a bug to me. @Simon_Axure might be able to help further.


#5

Hi arjay,

Would you happen to be converting the SVG into shapes via the right-click > “Convert SVG to Shapes” option? Whenever an SVG is converted into shapes in Axure RP, RP will try to replicate the SVG’s appearance to the best of its abilities using existing features. RP does have drop shadows, so the misalignment you’re seeing does seem like unexpected behavior.

Also, how are you importing your more complex SVG? Do you notice any difference in behavior between methods (e.g. dragging and dropping vs. importing via the image widget)? If you can attach a copy of the SVG you’re working with or an example SVG showing the same behavior, we’ll be able to do some further testing on our end. Please let us know if you have any questions in the meantime!


#6

No, I just place them on axure after saving from illustrator to svg.

The ‘convert svg to shapes’ worked perfectly, so far.

So simple which I missed.

Thanks! :slight_smile:


#7

I also had the same or similar issues in Axure 8 when dragging svg icon designs from windows explorer to Axure - it looked completely messed up.
Right clicking and choosing the ‘convert svg to shapes’ worked for me as well. I had no idea this feature existed!
This also works well when copy/pasting from Adobe XD
Thanks.