I have a few questions as part of our effort to try and get our SVG images to work in line with DevExpress best practices. So far we've only been working with the Bezier skin and trying wherever possible to use vector based graphics, but letting the user select from all available vector color palettes.1. Fill vs Style name - I've found that using a CSS style class name in an SVG uses the correct fill color from the active palette, and I can in fact use any class name from the palette, not just the color names. That's fine, but I'm not sure I quite understand the quote from this link about getting your SVG images to use the corresponding skinned color from a palette:
"...either paint icon shapes with the same colors as DevExpress skins or utilize valid .css style names."
There is a specific list of just 6 colors indicated, with specific color codes. I understood that if you simply use a fill color of one of those exact codes, like "#000000" it would skin your graphic exactly the same as if you had used a CSS style of the corresponding color, like "Black". In the attached application, I have a sample of both a fill color of black (#000000) and a style of Black, and I find it odd that both colors start out "skinned" in that they have a default grey color, but only the one that uses a style of "Black" actually changes colors with a different selected active palette. What skin/palette is the graphic that simply has a fill of #000000 using if not the currently selected palette? I even recall a support ticket with someone asking about this (I think to see if you could disable SVG skinning), and the suggestion if you want true black was to use a color "close to it" like #000001, which I also included in the attached application. But with just a fill color of #000000, it starts out as grey with the default color palette, not black, and it doesn't change according to a different active palette.2. Fill vs Stroke - am I right in understanding that if you do have your SVG image use a color style from a given palette (actually using the style name) that the respective color is only applied to the "fill" attribute of a component in the SVG? I often see "stroke" colors used by programs that we generate SVGs with, for things like borders around shapes or just simply the thickness of lines, but the DevExpress class style doesn't override the "stroke" color, so we have to turn everything into a path just so it uses a "fill" color instead and thereby uses the colors from the active palette.
3. Glyph Skinning for SVGs - Also in the attached application, I added the same SVGs to the Ribbon as BarButtonItems and I turned on AllowGlyphSkinning. I find the results strange, though - it seems to glyph skin all of the colored SVG images, even though according to this link:
" The Glyph Skinning feature is designed to be used with raster icons only. Vector icons are automatically colorized using skin palette colors."
According to that I would expect my SVGs to look the same as they do on the form itself, not be monochrome glyph skinned. I have to say that I'm happy that they are glyph skinned, that's in fact what I would want, but I just don't find it to be inline with the documentation warning above. Can you explain?
Let me answer your questions one by one:
>>1) Fill vs Style name
When you are using .css style names, a color that you set using the fill attribute will be ignored. If the style name is not set, the default palette will be used. Currently, we do not have a way to disable the skinnable function when one of six default DevExpress skin palette colors is used.
>>2) Fill vs Stroke
A line color does not depend on the style name and should be applied if the stroke attribute is used. If it does not work in your case, please provide your SVG image where this behavior is reproduced.
>>3) Glyph Skinning for SVGs
Let me explain the current behavior. When you enable the AllowGlyphSkinning option, your image is modified based on the foreground color. This function was implemented to modify the color of raster images. So, I suggest you enable this option if you are using not SVG images.
As for SVG images, their color can be modified using the color palette of the current skin without this option. So, it is not necessary to enable the AllowGlyphSkinning option for them.