search

materialos / icons

Material Design inspired product icons
118 stars 31 forks source link

Convert files to open source file format #111

Open reeseovine opened 7 years ago

reeseovine commented 7 years ago

I recently cancelled my Adobe Creative Cloud subscription because it was too expensive for how much I was using it. If somebody wants to download and edit these icons, their only options would be to buy a CC subscription or pirate it, for which I don't blame them not wanting to do. I know Illustrator has some unique features that Inkscape and other vector editors don't have, but how do you justify these icons not being editable with free software?

danielhickman commented 7 years ago

This is an issue but most of the designers prefer AI to Inkscape. We're thinking about exporting to SVG now that Inkscape stops adding 'root_path' elements and such, but drop shadows aren't translated well between the programs. Also, AI's scripting API doesn't seem to offer access to effects to add effects from the raw SVG filters. They are still FOSS, it's just not easy to maintain.

danielhickman commented 7 years ago

@crutchcorn

crutchcorn commented 7 years ago

This is a valid point, and something that we're going to address (and had tried in the past with little success) soon

danielhickman commented 6 years ago

I spent at least 24 man hours trying to figure out how to convert the repo 100% to SVGs or at least have SVGs for each icon accessible. You can see a bit of the code I've been playing around with at materialos/toolkit but here's what I found out:

Illustrator doesn't make good SVGs

Blending modes cause all of our current icons to appear as white outlines with a shadow due to our use of the "KMZ style whole icon shadow". It can be fixed but adds to the amount of work required to convert and also indicates how poorly AI translates to SVG in general. Converting this many by hand to have something that I don't already know about not work seems like a bad idea.

Drop shadows, other effects, and some special objects get rasterized. The raster images seem to be a high enough DPI for exporting but when opening in either program to make edits, you'll have to re-add them yourself every time without indication to what the values were. Example (screenshot of a rasterized drop shadow in a text editor)

Illustrator creates tons of groups and extra objects. They are mostly needless but using svgo breaks the file when collapsing them. This would need a custom svgo plugin that would need to be run on every exported SVG file from AI pre-commit to be readable during future edits. Example (only about one-third of the total amount of groups are visible in this screenshot from a normal-sized file)

The "Preserve Illustrator editing capabilities" option won't make Illustrator parse for changes made by someone in Inkscape next time it opens, in fact, it just saves an AI file inside of the SVG with some features like XMP missing. This means each edit will have to be reviewed and have the changes manually added by someone comfortable with AI or lose all AI features the previous contributor was using which isn't faster than our current setup.

Illustrator doesn't work well with SVG filters. The support for anything that appears like a drop shadow is limited — <feDropShadow> doesn't seem to work, for instance. Both Inkscape's and Illustrator's drop shadow presets merge the icon or something that results in a pixel grid misaligned to the rest of the objects without an alpha channel. There's probably a way around some parts of the issue, but will require every icon's drop shadows to be redone by hand and I'm skeptical about it working as a replacement even if I could get everyone to add these to their icons in the future. Example

Inkscape imports only okay-ish AI files

Inkscape is just about as good as importing an AI file as AI is at making SVGs. This is because the issues we're talking about are a mismatch between the two formats. When opening an AI file in Inkscape, it still creates some extra groups; clipping groups; and masks, but not as many as what AI does during an export to SVG. Drop shadows and such are still rasterized images and are made into masks that only appear correctly in Inkscape. I played around with the transforms and masks but couldn't figure out how to circumvent this issue by editing the files.

Good conversion seems unachievable

Because of the issues on both programs, automated or manual conversion can't be done well so my idea of a repo or branch that mirrored this one with converted files isn't a feasible middle ground.

I really would like to use SVGs to promote contributions, collaboration, to be more open, to make icon pack builds faster, changes to metadata easier, etc. etc. etc. However, with this mix of issues, it seems to convert the repo to SVGs will result in loss of features and of editability for those who use AI while producing files that look the same or worse in Inkscape. I don't see a way to address this issue besides only using SVGs and stop using Illustrator altogether, which I don't see happening.