Coder Social home page Coder Social logo

Comments (4)

danielhickman avatar danielhickman commented on May 23, 2024 1

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.

from icons.

crutchcorn avatar crutchcorn commented on May 23, 2024 1

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

from icons.

danielhickman avatar danielhickman commented on May 23, 2024

@crutchcorn

from icons.

danielhickman avatar danielhickman commented on May 23, 2024

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.

from icons.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.