Opacity in svg disappear when i upload the file

286 views
Skip to first unread message

mecs.g...@gmail.com

unread,
Jun 18, 2014, 2:35:59 PM6/18/14
to ico...@googlegroups.com
Hi,

can you help me to understand, how to create the proper svg, with different parts, opacity 1, .75 and .5?

The svg what we prepare is good and partially had opacity if i see in browser, but after uploaded to icomoon, all parts are showing up without any opacity.

Please check the sample svg at https://drive.google.com/file/d/0B6j9-9WV3I1sSmtvbHlhaU9SN0U/edit?usp=sharing

Keyamoon

unread,
Jun 18, 2014, 3:22:06 PM6/18/14
to ico...@googlegroups.com
Hi,

Since font glyphs can only have one color, IcoMoon ignores opacity and changes all colors in your SVG into the same color.

bellon...@gmail.com

unread,
Feb 10, 2015, 9:24:46 AM2/10/15
to ico...@googlegroups.com
Agreed but if we have only one color and variation of opacity, why wouldn't it work ? Plus there already are some icon packs that include such variation (like Google Material Icons), how did they managed to do that ?

Keyamoon

unread,
Feb 10, 2015, 1:28:37 PM2/10/15
to ico...@googlegroups.com
Font glyphs cannot be partially transparent. Every path in a font glyph can only have an opacity of 100%. The google icon set doesn't come with a font. If you try to make a font from its icons with transparent parts, you will get the same one color result; unless you stack multiple glyphs on top of each other and then use CSS to apply different colors and/or opacity.

If you import a multicolor SVG to IcoMoon, it will use this stacking technique for the font.
Reply all
Reply to author
Forward
0 new messages