Add SVG export option: outline strokes

Share an idea
1

I’m currently working on a set of icons which are a mix of bought and customised vectors.

The bought icons are all shapes with fills, but with the new icons I’m adding, working with strokes is preferable:

image

The icons will end up in a web application, and I do some additional work to manipulate fills and strokes both at the CSS and SVG level with JavaScript.

The ideal situation for me would be to have everything in the authoring environment be strokes, and everything in the runtime environment be fills.

Could an export option “outline strokes” (analogous to “outline text”) be added to the SVG export, document export options, or even to the lines themselves?

Thanks.

3 Likes
2

I share this problem and hadn’t considered your prescribed solution but that sounds great. I’m half through converting everything to outlines in my working env and I hate myself for it. I created a backup of “working” icons just in case but that’s problematic for so many reasons.

3

Hey Arron,

I had a bit of a brainwave this morning, which would be to create a node script to convert the exported icons after they are saved.

It looks like there are a few SVG outline packages out there, so it should be a case of setting up a folder watch, and running on changed files.

This way we can keep our source files as lines, wouldn’t need to wait for Figma to make any updates, and it would get the job done.

I’ll probably tackle this in the next week or so as I’m curious to see if it will work.

If I do, I’ll post back here and let you know.

4

OK! I seem to have managed the core script:

image
image776×806 27.1 KB

I can’t say for certain that it will work on every image thrown at it, as I’ve only tested it on one small, 2-colour icon.

But I’ll build the batch script at some point in the next few days, and will make it available if it works.

Yay!

5

OK, looks like I’m nearly there with the script; I’ll be posting updates on Twitter, here:

1 Like
6

OK, a first version of this script is now up on GitHub:

outliner-logo
outliner-logo1102×420 46.8 KB

Retweet if you want to show some love:

1 Like
7

Now available to install as a service via NPM:

Full docs on the GitHub page.

2 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.