I am trying to build an SVG using adobe XD to export and use within an HTML document. I plan to animate this SVG by targetting the ID of the path/group and using the transform attribute to translate/rotate/etc. a section of the SVG.
For some reason, when I export the SVG, adobe XD draws the paths without correctly positioning them, then uses transform: translate(X,Y) to move the path/group to the correct position. This is in contrast to drawing the path in the correct position within the SVG canvas to begin with (using d="M X Y"), which would make transform: translate(X,Y) redundant.
This creates issues when I try to use the transform attribute in my animation. Transform always overrrides existing values when it is set, leading the paths/groups I am animating to become mispositioned. I hope I have made my issue clear.
If there is something I am missing please let me know. Other design software, such as Figma, does not have this issue. It simply draws the paths in the correct positions, esssentially freeing up the transform attribute for the front-end developer. If there is a work around, or something I have misunderstood, please let me know. Thank you in advance 🙂
I am not sure about the limiations of creating an SVG in Adobe XD, but if you are subscribed to CC, you can try using Illustrator and see if that meets your requirements. I would also suggest reading the section on exporting to SVG in this article https://helpx.adobe.com/ca/xd/help/export-design-assets.html to check if there is anything you are missing when exporting to SVG.
Thank you for your reply. I am not subscribed to CC and don't have access to illustrator. From what I have read, illustrator would meet my requirement. I am just providing feedback in the hopes of improving XD, as this is a very basic feature that most design tools do well. I have already used Figma, which is a free design tool, to address my issue. I have already read the article you have linked as well 🙂
Thank you for your feedback and taking time to share it here. I will share your observations with the product team. I am sure that they are aware of it, but every voice counts in helping them prioritize feature sets.
Have a wonderful weekend,
I am just having the same issue for the exact same thing as Shareef. It would really be nice if there is a solution to this. 🙂
Thanks. Very useful tool.
With the settings
Pretty Markup ON
Clear IDs OFF
I can easily find and copy my animation paths without any transform translate.
I love to create SVGs in XD but this is a blocker. AI exports SVGs as it should be in XD too. I hope you will fix it.