Serious SVG Export Bug - Adobe XD

[Mrittick Choudhury]

Hi Adobe, 

So I am using Adobe XD to create software prototypes and stuff. I designed an icon in it and in the export stage, I am facing a weird problem. This is the icon, when exported as PNG, which exports as is (true to the design) -  

However, this is what happens when exported as SVG (tried all permutations and combinations of the SVG export parameters, still same results) - 

Notice how the lower-left portion of the icon-design is completely messed-up? That's the bug. 

Similar problems are showing-up while exporting other SVGs as well, which is forcing us to export them inn PNG, but it's not the ideal scenario and hampers us from using lottie-animations, which is a dealbreaker for our product. 

Kindly requesting for some support and a fix please. Thank you!

[Test Screen Name]

This is not Adobe support. This is a community forum. You may get better advice if you post in the XD forum https://community.adobe.com/t5/adobe-xd/ct-p/ct-xd?page=1&sort=latest_replies&tabid=all but that is still not Adobe support.

[Dan Rodney]

It does look like a bug in how XD handles strokes. I just did a test and exporting to SVG and copy/paste in Illustrator were both changing the stroke.

I recommend contacting Adobe Support https://helpx.adobe.com/support.html directly. This is a community help forum, and is not the place to report bugs.

[HARSHIKA_VERMA]

Hi Dan Rodney,

Thank you for your contribution to this post. If you're able to reproduce the issue at your end, is it possible for you to record a video so that I can go ahead and log a bug with our enggineering team? 

Please share your OS details and the XD file as well. 

I will try my best to investigate the issue.

Thanks,

Harshika

[Dan Rodney]

I don't have time right now for a video, but the steps to reproduce are:

1. Create a shape (such as a rectangle) with a dashed stroke.
2. Export that shape to SVG (or copy and paste into Illustrator).
3. The final SVG file (or shape in Illustrator) will have a dash that looks different.

[Kenneth Kawamoto]

The SVG created by XD is correct. You can verify this by examine the SVG markup. Also if you create the same thing in AI, you'll get the same SVG (although the markup AI generates is not as clean as the one generated by XD).

What's wrong in this case is that XD is displaying dashed strokes upside-down.

Workaround:

• Add transform:scale(1,-1) attribute to the SVG markup - but this won't work if your shape is not symmetrical (even if it is, you'll need to translate the position of the object too)
• Export as PDF - you will retain it as vector (unlike PNG) but your strokes will be outlined so it won't be the same thing
• Open in AI and flip it and save as new SVG

Basically Adobe needs to fix this

[HARSHIKA_VERMA]

Thanks for sharing the workaround, Ken and Dan for sharing the steps. I have logged a bug for the issue so that our team can investigate on the issue.

Thanks,

Harshika