Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


SVG Export without transform: translate

New Here ,
Feb 08, 2020 Feb 08, 2020

Copy link to clipboard

Copied

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 🙂

TOPICS
Design, Import and export

Views

3.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 12, 2020 Feb 12, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2020 Feb 12, 2020

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 14, 2020 Feb 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 28, 2020 Apr 28, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 26, 2021 Feb 26, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 29, 2021 Apr 29, 2021

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 30, 2021 Apr 30, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

LATEST

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!

 

Screenshot_1.png

 

Please advise!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines