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

February 14, 2018 at 12:41am

@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

Question related to what @macerrss brought up. Is middle/center the most accurate to what CSS border does/behaves like?

  • reply
  • like

February 21, 2018 at 1:10am

Yea bc I've heard this is still what SVG 1.1 (which is still what we are right now, there's still no 2.0 to include this feature, it's ridiculous) supports right now. So other design tools either just convert that stroke to middle stroke (for non destructive still editable shapes) or just outline stroke to show as is

  • reply
  • like

March 22, 2018 at 4:08pm

Will Figma users be notified of this update when it is ready?

  • reply
  • like

Hmm. My messages are gone here.

  • reply
  • like

April 15, 2018 at 8:58pm

How do I get into the beta of this? would be super helpful

  • reply
  • like

April 16, 2018 at 7:19am

svgo implementation would be realy nice

  • reply
  • like

April 17, 2018 at 6:32am

I don't know if this is a symptom of the new SVG engine that I requested on a beta test with @shuwamoto but I've seem finally got a weird bug here

  • reply
  • like
  • reply
  • like

It's vertices seems always cutted like that, changed the stroke to outside, center, inside, still no change

  • reply
  • like

Adding my penny to this thread, I'm currently in the process of migrating our icons sprite workflow from Illustrator + manual export (with assets export) + Git versionning to Figma + Figma platform + CI (à la Github's octicons).

The main and blocking drawback is the format of the exported SVG. You can compare the outputted code here (formatted for readability) https://gist.github.com/Alexfrits/ea1aa3b83676e22863a95da8e1561c0c .

Illustrator outputs a cleaner code, more readable, and easier to optimize through SVGO.

  • reply
  • like

When I work with SVG sprites, I want a code that's easy to manipulate and style with CSS.

  • reply
  • like

+1. Excited for the improved export. I typically export out of Illustrator and do a little hand-tweaking to SVGs, but it would be awesome to keep things in Figma.

  • reply
  • like

@mancerrss, could you send us a file through the app chat to help us investigate?

  • reply
  • like

May 3, 2018 at 7:32am

Hey! We launched our improved SVG exporter: https://figmareleases.blogspot.com/2018/05/whats-new.html

We're still planning to make a few more tweaks (like disabling id attributes by default, you can do this manually under the ... button next to the SVG export item). Let us know how it works!

like-fill
3
  • reply
  • like
Your message here...

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