Highlighted

[Import-Export]- Transforms in SVGs

New Here ,
Apr 02, 2020

Copy link to clipboard

Copied

To whom it may concern,

 

My company Kaon interactive, like many companies,  uses SVGs for dynamic icon animation.  We have recently run into an issue using icons directly from XD as they add a transform="translate" properties to every object.  We are wondering if there might be a way for the Adobe dev teams to update the export featuer of the application to make this an option to be turned on or off.  We run into a lot of challenges when working with these being automatically placed on all objects. We often find ourselves using the same object in many scenarios and it makes updating those objects very time consuming.

 

Below is a note from our lead developer as to our challenge.


Thank you for your time.

 

H.P. Stern

 

 

Hi

Transforms can be used to position, rotate, or scale an element.
Position and size could also be done with a handful of other mechanisms.
Transforms a special because the browser puts them on their own layer, it separates each transformed element from the rest of the page.
Browsers use a computer's GPU to render transformed layers, instead of the CPU that it runs javascript and the rest of the layout on.
Rendering on the GPU has pros and cons.
The pro is that the GPU can render a layer at 60 FPS regardless of what the CPU is doing. That means that you'll get the smoothest animation.
The con is that GPU typically has a small amount of memory compared to the main CPU. If the transformed element isn't going to move, it won't benefit from the FPS, and will just take up memory.
At Kaon, we use translation in animation.
We expect the natural position of an element to be determined by another mechanism, like top and left, or the natural page flow.
 
For example, let's say we want an animation to slide a few elements to the right and scale it up.
If those elements are naturally positioned using "left", they might look like this:
.exampleElement1 {
  left:30px;
}
.exampleElement2 {
  left:80px;
}
Here, we can write a class that we want to apply to all such elements. This says an element's natural transform should have 0 translation and a scale of 1, and if the transform changes, it should animate to the new value over 0.5 seconds:
 
 
{Renamed and Edited By MOD}

Hi there,

 

Thanks for reaching out and sharing the feedback. We have received a similar request on our UserVoice page. I'd request you to please share your comments and upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/37451392-svg-should-not-transform-translate

 

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

 

Regards

Rishabh

TOPICS
Import and export

Views

144

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

[Import-Export]- Transforms in SVGs

New Here ,
Apr 02, 2020

Copy link to clipboard

Copied

To whom it may concern,

 

My company Kaon interactive, like many companies,  uses SVGs for dynamic icon animation.  We have recently run into an issue using icons directly from XD as they add a transform="translate" properties to every object.  We are wondering if there might be a way for the Adobe dev teams to update the export featuer of the application to make this an option to be turned on or off.  We run into a lot of challenges when working with these being automatically placed on all objects. We often find ourselves using the same object in many scenarios and it makes updating those objects very time consuming.

 

Below is a note from our lead developer as to our challenge.


Thank you for your time.

 

H.P. Stern

 

 

Hi

Transforms can be used to position, rotate, or scale an element.
Position and size could also be done with a handful of other mechanisms.
Transforms a special because the browser puts them on their own layer, it separates each transformed element from the rest of the page.
Browsers use a computer's GPU to render transformed layers, instead of the CPU that it runs javascript and the rest of the layout on.
Rendering on the GPU has pros and cons.
The pro is that the GPU can render a layer at 60 FPS regardless of what the CPU is doing. That means that you'll get the smoothest animation.
The con is that GPU typically has a small amount of memory compared to the main CPU. If the transformed element isn't going to move, it won't benefit from the FPS, and will just take up memory.
At Kaon, we use translation in animation.
We expect the natural position of an element to be determined by another mechanism, like top and left, or the natural page flow.
 
For example, let's say we want an animation to slide a few elements to the right and scale it up.
If those elements are naturally positioned using "left", they might look like this:
.exampleElement1 {
  left:30px;
}
.exampleElement2 {
  left:80px;
}
Here, we can write a class that we want to apply to all such elements. This says an element's natural transform should have 0 translation and a scale of 1, and if the transform changes, it should animate to the new value over 0.5 seconds:
 
 
{Renamed and Edited By MOD}

Hi there,

 

Thanks for reaching out and sharing the feedback. We have received a similar request on our UserVoice page. I'd request you to please share your comments and upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/37451392-svg-should-not-transform-translate

 

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

 

Regards

Rishabh

TOPICS
Import and export

Views

145

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
Apr 02, 2020 0
Adobe Employee ,
Apr 03, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out and sharing the feedback. We have received a similar request on our UserVoice page. I'd request you to please share your comments and upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/37451392-svg-shoul...

 

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

 

Regards

Rishabh

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 03, 2020 0