SVG Export without transform: translate

[Shareef Hadid]

Hi,

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 🙂

[Preran]

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.

[Shareef Hadid]

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 🙂

[Preran]

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,

Preran

[dominikk90967463]

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. 🙂

[dominikk90967463]

For those with the same issue, I found this tool useful: https://jakearchibald.github.io/svgomg/

[oooola]

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.

[DYNWEB.CZ]

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.

[Prototypen]

If you have Illustrator CC, the simplest and most straightforward solution to this, is to 1) export your XD-artboard to SVG, 2) import the SVG to Illustrator CC, and 3) select all objects and copy and paste the SVG-markup in a text editor.

Voila!

The transform-things are completely removed and the positioning works as expected 🙂

[DYNWEB.CZ]

I still miss the point... OK, I can copy (XD) and paste (AI) the images I want to have "nicely created SVG source code" or I can use some other tool (SVGMO mentioned above) BUT why? Why the heck should I have two apps open and slow down my workflow? XD has some cool built-in assets export features. Both XD and AI are the products created by the same Adobe company, right?

[Satty.]

We are also running into this issue. Exporting from XD to Illustrator does work as a quick patch but not as a solution. Tremendously hinders workflow!

Please advise!

[r.blinzler]

I am having the same issue.

In my case, I did the entire app mockup in Adobe XD (that's what it's for?). I have several svg elements that I want to put into an html page. One specifically is a path in which I will create an <animateMotion> <mpath> to animate other svg elements along.

My problem is, the path is drawn outside of the artboard and XD uses (at least in the svg code) a transform translate to move the path into the artboard. This means the path the other elements follow is outside the visible area of my project.

Why does XD do this? Is this how it generates the SVG Code or does it actually paint elements in a staging area outside of the artboard and then position them using transforms? Should I be using another application to design my mockups?

[r.blinzler]

I was able to get the desired path without the transform, by following the instructions to use Illustrator as an intermediator