Clean up SVG content (solves issue #3)

[jhnsnc]

This PR relates to issue #3 DCO 1.1 Signed-off-by: Chris Johnson jhnsn.c@gmail.com

I fixed all SVG files to have consistent markup, removing unnecessary attributes, elements, and arbitrary whitespace. I also had to rename one file (action-based/down-to-bottom.svg -> action-based/down-bottom-32.svg).

With these changes the SVGs look identical, but they are now about 16% smaller overall. They should also render faster due to removing duplicated and unnecessary elements (though I did not gather metrics on that improvement).

If desired, I could also write up a list of things to look for in order to clean up the output of the Adobe Illustrator SVG export tool.

Thanks!

[barlock]

While I agree very strongly with this change I'm not sure there is any point to it sense all the files are mastered in the .ai file and could be overwritten at any point. @hchughes Its important to developers (and more importantly our users) that these svgs have these optimizations. What can we do to ensure they don't get overriden at some point?

[jhnsnc]

There are a few options I can think of. The easiest option would probably be something like a gulp plugin to automate this sort of optimization.

Most of these changes were made semi-automatically with manual tweaks, so with a bit more work we could have an automatic export/optimization process. There's also plenty of tools out there for dynamically creating PNGs from SVGs.

[barlock]

Yeah, the issue is they're mastered in the .ai files not the svgs. I tried earlier to get a dist folder (#1) but haven't made any progress. Any experience generating svgs/pngs from an artboard with gulp?

[jhnsnc]

I've never tried using gulp to directly control exporting from an Adobe CS program, though it would certainly be possible (especially considering the file format changes in the last few years). That's probably not worth the time though.

What we could definitely do to simplify the export process for a designer in Illustrator would be to write a custom script. I forget what they call it... something like "ExtendScript"... or "JSXF", but basically you write custom JavaScript to "drive" Illustrator (or Photoshop, etc). You take that script (which we could add to the repo) and place it in a special folder and it then becomes a custom toolbar command in Illustrator.

So we would have that custom export script, which would probably just dump the SVGs into a folder. At that point we could use something like gulp to manipulate them more (e.g. clean up SVG file contents, save PNG copies at appropriate resolutions, etc).

[barlock]

That sounds excellent! Would svgo solve the issues you cleaned up? I run it as a post-install script. I'm not as familiar with svg optimization sad I'd like to be.

[barlock]

@jhnsnc Do you have any experience writing any jsx scripts to do that? I found one, but it doesn't work for how these icons are laid out.

[jhnsnc]

sry for the delay on responding.

svgo would likely fix some of the issues, though I doubt it would take care of the duplicate paths. I guess we should fix the duplicate paths in the Illustrator files though.

It's been a while, but yes I have written JSX scripts before. I found an Illustrator extension that gives you a JS console panel. That helped a lot with writing them. Once I get the licensing issues for Adobe CC figured out I should be able to work on that.

[barlock]

That would be great! Could you close this issue and open an issue for automatic exports of illustrator files? There's discussion of svgo and other optimizations in #1

[slapjack7]

@jhnsnc can you please advise @hchughes how to avoid this going forward as new icons are added? thanks. cc: @mbarlock

[barlock]

Avoid what? I can point you to source for how I've solved the problem in the mean time of resolving #1. Ping me on slack. Please open any other problems as issues

[barlock]

@jhnsnc I've created an issue for automatic export from illustrator. #16

[barlock]

I'm closing this sense it was fixed by #33 and #34