Highlighted

SVG Export without transform: translate

New Here ,
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

1.5K

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

SVG Export without transform: translate

New Here ,
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

1.5K

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
Feb 08, 2020 2
Adobe Employee ,
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
Reply
Loading...
Feb 12, 2020 1
New Here ,
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
Reply
Loading...
Feb 12, 2020 2
Adobe Employee ,
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
Reply
Loading...
Feb 14, 2020 0
New Here ,
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
Reply
Loading...
Mar 27, 2020 0
New Here ,
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
Reply
Loading...
Mar 27, 2020 1
oooola LATEST
New Here ,
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
Reply
Loading...
Apr 28, 2020 0