Skip to main content
Inspiring
September 23, 2020
Answered

Export svg without transforms for the purpose of animating

  • September 23, 2020
  • 3 replies
  • 1903 views

When will illustrator support using x, y, width, height instead of transform - for translating and scaling?

I can't pull this into an html document and animate it because the inline transforms override the css transform.

I have to manually convert all of the transforms to x,y, height, width.

 

 

I've tried other people's suggested solutions of changing the x,y of the artboard, resetting the bounds, etc and it doesn't help.

 

Thank you.

 

This topic has been closed for replies.
Correct answer Monika Gause

If you want to talk to the developers and suggest a feature, please do so over there:

http://illustrator.uservoice.com

3 replies

Silly-V
Legend
October 18, 2020

It looks like you may be using symbols due to the presence of the <use> elements. This is a great idea in some cases, but if editing the transforms is not desirable for you and using symbols isn't that important to you in the browser, try to break the links of your symbols to see if the use elements turn into paths or something and don't have the transforms applied.

Symbols are useful in some ways, but in terms of workflow - for Illustrator it's really helpful to change one thing and have a lot of associated art change, but in the browser if you can write a code to change a symbol you can just as easily write a piece of code to edit multitudes of things which are not necessarily even associated in an instant. So if this is really the case and your needs to not have transforms are indeed solved thus I'd be interested to see how it goes.

Inspiring
October 19, 2020

That's a good pointer, but I can confirm I'm also seeing this issue on very, very simple files that don't use symbols at all.

I note a lot of reports in the XD threads seeing a similar issue and I wouldn't be surprised if there was some reuse of export code there!

Inspiring
October 18, 2020

I'd be interested to know how exactly you are running the SVG export, I've noticed in some of my scripts it does this but in others it doesn't.

 

I'm trying to track down the exact difference but haven't yet nailed it, I can take the same file and get two different results, both using the `exportForScreens()` method.

My workaround at the moment is to always export by artboard, not by asset or document, and to always resize the artboard immediately prior to export.
So far when I do that it seems to reliably remove the transform(), but I'm stumped as to why it sometimes adds it in the first place!

Nadia5C1DAuthor
Inspiring
October 19, 2020

I've tried to export every which way you can and even Save as, but nothing works.

Inspiring
October 19, 2020

So are you exporting from the menus or from a script?

 

In script I'm using the `exportForScreens()` method which does let me work around this issue with by doing some other hacks first, but I don't think it will work for symbols unless you script to break the symbols out into unique document path items first.

Monika Gause
Community Expert
Monika GauseCommunity ExpertCorrect answer
Community Expert
September 23, 2020

If you want to talk to the developers and suggest a feature, please do so over there:

http://illustrator.uservoice.com