Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Figma / Feature Requests

Cleaner SVG export

Cleaner SVG export

Figma / Feature Requests · July 20, 2017 at 6:33pm (Edited 1 year ago)
As an animator and developer, you want your SVG output as clean as possible. It would be nice if Figma could do it a bit more like Illustrator.
This is a quick comparison of the two. I will make an document with a rectangle 800x600 and draw a circle 200x200 in the middle.
The Illustrator output looks like this:  
Figma output looks like this:  
As you can see the Figma output adds allot more unnecessary code in my opinion. Which makes it allot harder to read and unusable for web animations. I hope you will add this feature.
Thanks!
Load previous messages

October 25, 2017 at 7:21pm

Improved SVG support would be great. I am running into some wonky stuff right now. Like the background of the underlying frame being added to the SVG instead of a transparent background, and also shapes which are strokes being exported as solid fills. Having to do clean up in Illustrator right now :(

like-fill
1
  • reply
  • like

October 27, 2017 at 3:31am

Really need better svg exporting.

like-fill
1
  • reply
  • like

December 13, 2017 at 1:23pm

just adding another avatar to the requests for SVG exporting :) - I've got no details to add beyond what's already been written, but if the engineer who's passionate about the subject needs moral support and users in their corner, here's some of that :)

like-fill
1
  • reply
  • like

December 15, 2017 at 6:10pm

Hi folks! We're getting ready to beta test some SVG export improvements. If you're interested in participating, please DM me here on Spectrum, or on twitter at https://twitter.com/skuwamoto . Thanks!

like-fill
5
  • reply
  • like

December 16, 2017 at 3:34am
like-fill
1
  • reply
  • like

My quick 5 minute look at comparing exact same SVG with old export...shows huge improvement!!! Thank you @skuwamoto & team!!! Hopefully will get to spend some more time with them next weekend.

like-fill
3
  • reply
  • like

February 1, 2018 at 11:38am

Hi-hi! How could participate the beta test?

  • reply
  • like

February 12, 2018 at 5:10pm

Still super happy with the SVG improvements! Any idea when these improvements will roll out to all users?

  • reply
  • like

Yes, I definitely agree SVG needs to be cleaned up more. When I go into the file, the SVG has too many transforms, groups, etc.

  • reply
  • like

February 13, 2018 at 9:06am

Would love to participate in the beta test here!

  • reply
  • like

i use https://jakearchibald.github.io/svgomg/ for svg optimising

flow: copy svg code form figma > paste markup to svgomg > download optimized svg

  • reply
  • like

Does it clean up transforms in favor of flattened paths?

  • reply
  • like

The new Figma SVG export that Sho recruited some beta testers for is a HUGE improvement over the current SVG export. If you look at the image above that I posted, you can see the difference. Hopefully it makes it way into a future release once their testing concludes. The resulting files are much cleaner (and smaller).

like-fill
2
  • reply
  • like

February 14, 2018 at 12:41am

@ryngonzalez @andrewfluck You're now part of the beta! Let us know if you have feedback.

like-fill
1
  • reply
  • like

@thomas-lowry We're working on getting it out to all users, stay tuned!

like-fill
2
  • reply
  • like

Awesome!

  • reply
  • like

February 14, 2018 at 11:13am

Nice 😀 thanks

  • reply
  • like

Hey guys. Can anyone see my other thread problem here if this is about the messy code export of Figma or is it just about my incompetency on exporting SVGs?

https://spectrum.chat/thread/14b2d759-5e6c-4441-b75b-2e8d3aaeffa1

  • reply
  • like

Also any specific date or roadmap when this beta svg export improvements will be shipped?

  • reply
  • like

February 14, 2018 at 7:11pm

ah seeing this beta test output is so awesome thanks for sharing it @thomas-lowry

  • reply
  • like

February 15, 2018 at 1:26pm

sign me up please, my figma account is nekto_mailru@mail.ru

  • reply
  • like

February 17, 2018 at 10:18am

So I heard that AI and Sketch exports strokes that either outside or inside as expanded appearance on in figma's feature lingo, Outline Stroke. Bc apparently the SVG still doesn't support stroke alignment yet and the OG board members already raised kids and send them to colleges, the new SVG committee can't agree yet on SVG 2.0 update yet to fix these kinds of things

While Figma does not, that's why my export problem is so weird

  • reply
  • like

I suggest to @skuwamoto to make the newer SVG algorithm implementation to just Outline Stroke the strokes with either inside or outside alignment when they are exported. So they're as is

  • reply
  • like

If y'all want an non destructive SVg export that you still can edit, just use middle or center stroke alignment

like-fill
1
  • reply
  • like

February 20, 2018 at 7:08pm

I'd love to be able to sign up for testing this @skuwamoto!

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```