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

July 20, 2017 · 6:33pm(Edited 10 months 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!

July 20, 2017 · 6:40pm
I'm totally behind this. Can't wait for SVG improvements. Most of what I do in Figma gets exported as SVG and I'd love to be able to use it "out of the box" so to speak.
like-fill
8
reply
Hey Martijn, thanks for the feedback! You're right that it could definitely be cleaned up a bit to make it more user friendly. I know that SVG export improvements are on our roadmap for the next few months, so thanks for hanging in there. One of our engineers is very passionate about this area – I'll make sure to pass your feedback to him.
like-fill
1
reply
Primitives, strokes, text, relative-transforms, and inlining paths and transforms are some of the items that we still need to tackle on SVG export. That should clean up the files that you get out of Figma. Currently we try to separate the scene graph (the tree of groups and shapes) from the large content (geometry and images). Then we de-duplicate those by referencing them xlink:href in the defs block, and we put that defs block last so that you scene could load as soon as the geometry is reached. This makes sense for large files, but less so for small icon exports where you want more compact output.
like-fill
2
reply
Illustrator has about 12 different options for SVG export, and Figma currently has 1. SVGO has even more, but some of them break the SVG output. There are lot of different ways to manipulate SVG for different outcomes. Inlining transforms multiplies the layer transform into the path, but also means you can't reuse that path. So in optimizing for one case, you then can't transfer that SVG into another design tool and have the transform.
like-fill
5
reply

August 30, 2017 · 7:43pm
I think it's worth considering the use case here too, I tried to export SVG for android and there's no way to use SVGs from Figma in an Android app at the moment. You need to run it through SVGO then refactor the code by hand to remove desc, defs etc.
like-fill
1
reply

September 1, 2017 · 5:28am
Android added defs support so that means Figma files should import more easily there from Figma.
like-fill
2
reply

October 17, 2017 · 4:36pm

An option to keep strokes in SVG exports would be great, so we can play with thickness or use vector-effect="non-scaling-stroke". I often design icons for web sites or apps, and have to draw/export them in Sketch (the horror). This is basically the only reason I still use Sketch. By the way, Sketch has a nice feature to keep strokes even if their position is "inside" or "outside".

like-fill
3
reply

October 25, 2017 · 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

October 27, 2017 · 3:31am

Really need better svg exporting.

like-fill
1
reply

December 13, 2017 · 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

December 15, 2017 · 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

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

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

February 1, 2018 · 11:38am

Hi-hi! How could participate the beta test?

like-fill
0
reply

February 12, 2018 · 5:10pm

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

like-fill
0
reply

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.

like-fill
0
reply

February 13, 2018 · 9:06am

Would love to participate in the beta test here!

like-fill
0
reply

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

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

like-fill
0
reply

Does it clean up transforms in favor of flattened paths?

like-fill
0
reply

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

February 14, 2018 · 12:41am

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

like-fill
1
reply

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

like-fill
2
reply

Awesome!

like-fill
0
reply

February 14, 2018 · 11:13am

Nice 😀 thanks

like-fill
0
reply

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

like-fill
0
reply

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

like-fill
0
reply

February 14, 2018 · 7:11pm

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

like-fill
0
reply

February 15, 2018 · 1:26pm

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

like-fill
0
reply

February 17, 2018 · 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

like-fill
0
reply

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

like-fill
0
reply

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

February 20, 2018 · 7:08pm

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

like-fill
0
reply

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

like-fill
0
reply

February 21, 2018 · 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

like-fill
0
reply

March 11, 2018 · 2:56pm

+1

like-fill
0
reply

March 22, 2018 · 4:08pm

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

like-fill
0
reply

Hmm. My messages are gone here.

like-fill
0
reply

April 15, 2018 · 8:58pm

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

like-fill
0
reply

April 16, 2018 · 7:19am

svgo implementation would be realy nice

like-fill
0
reply

April 17, 2018 · 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

like-fill
0
reply
like-fill
0
reply

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

like-fill
0
reply

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.

like-fill
0
reply

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

like-fill
0
reply

+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.

like-fill
0
reply

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

like-fill
0
reply

May 3, 2018 · 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

Yes!

like-fill
0
reply
like-fill
0
reply
Your message here...

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