Support for VectorNodes exported as SVGs in HTML and Tailwind

[mimshwright]

I've added (started adding) support for exporting VectorNodes as SVG elements. I have only done some basic tests but so far it looks ok. I'd appreciate help with testing it further.

It seems this step has to take place before the nodes are converted to altNodes.

Known Issues:

• this only works for HTML and Tailwind
• I haven't tested it much with complex shapes etc.
• It relies on exportAsync and currently, there's no UI that informs the user that an asynchronous operation is happening. It'll probably be instantaneous in most cases, but there is the possibility that it takes a while and things get out of sync.
• This could maybe be done with vectorPaths instead, but it seems like a pain in the ass to also convert the fills etc. into SVG when Figma is so kind to do this for us :D

[bernaferrari]

exportAsync is not very good. It tends to freeze the UI if something huge is inputted. It is fine, the only thing is that it is hard to detect the grouping. Nowadays things are a bit more standard than in the past, but you need to correctly identify that an icon is an icon and that is not trivial.

[mimshwright]

@bernaferrari I'm really interested in understanding how it works and what the issues are.

Do you have some figma files that you use for testing that have difficult to handle vectors?
What do you mean about icons?
I see that

I think the UI should not freeze if we're using the async methods because they run in another process, probably wasm. If it is slow, i think it's understandable that a plugin not always work, especially if the input is super-complex.
EDIT: I see that maybe you mean it freezes the whole FigmaUI which I think maybe yes, it does.

I tested with a big SVG and it took a while but did generate something:

I tried using a stupidly big map SVG and it failed to export (but figma could also barely draw it)
https://commons.wikimedia.org/wiki/File:The_Hague,_Netherlands,_the_old_city_center.svg

[mimshwright]

I see also that I probably need to absolutely position the containing divs like the other elements seem to be doing.

[bernaferrari]

I think the UI should not freeze if we're using the async methods because they run in another process

in theory yes, in practice that is not how Figma works, everything goes single-threaded 😛

ideally you export the italy map as a single svg. Like, with svg depending on the selection you get different things. So you can export italy as a single svg or multiple svgs, that's why grouping is important. It defines how many things are going into the svg.

[mimshwright]

hmm. i wonder if we could walk thru the children and see if everything within is either a group or a vector, then could export it all at once.

[bernaferrari]

you can, but sometimes there might be rectangles, text, shapes, anything inside... it is impossible to do it perfectly. Even Figma now has a way to detect if something is an icon, but it works very poorly. Can use that if you want, but it is kind of bad.

[mimshwright]

I see that there are a lot of issues with layout and groups. I'll need to look into this more.

[mimshwright]

There are too many issues with this to make it a pull request right now. so i'm going to close it. but i'll link to this from one of the issues since there are interesting comments.

[bernaferrari]

If you can find a way that works well for you...