Current filter:
                                You should refresh the page.
                                  • 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?


                                • Igor (DevExpress Support) 12.06.2018


                                  Just wanted to drop you a note to let you know that we need additional time to finish working on the answer. Thank you for your patience and understanding.

                                • Ben Ernest-Jones 12.06.2018

                                  Awesome, no problem, thanks 

                                1 Solution

                                Creation Date Importance Sort by

                                Hello Ben,

                                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.

                                • Ben Ernest-Jones 12.09.2018

                                  >>1) Fill vs Style name
                                  So what you're saying is that when a style name is not set, but one of the six default colors is used, it will always use the "default palette" for that color even if another palette is currently active? I find it strange that it would not change when a new palette is selected. That functionality choice purposefully mixes 2 palettes that were not designed to be visually compatible with each other (the default and the active). Also, I'm not sure I'm seeing that to be true for all colors... in the application I attached you can see that the style Red and the fill #D04D2F do not look the same when the default palette is selected, even though according to your documentation that is the default skin palette color for Red.

                                  >>2) Fill vs Stroke
                                  OK, so basically you're saying that your palette class styles only define "fill" and nothing else. I added an image with a green stroke border to confirm this in the attached application.

                                  >>3) Glyph Skinning for SVGs
                                  Well, I understand colors for SVG images will be used from the color palette of the current skin if AllowGlyphSkinning is disabled, but I find the documentation misleading since to me it implies that this setting has no impact on SVG images, which it clearly does. I've updated my project and reattached it to 1) add a BarManager with the same images and 2) add a check box to turn glyph skinning on/off for both the bar manager and the ribbon, and clearly the colors of the SVG images in both menus are impacted. Are you saying this is considered unintended, undefined behavior that is not by design, and I should use at my own risk? 

                                • Nadezhda (DevExpress Support) 12.10.2018


                                  I've created a separate ticket on your behalf (The Red style color is different from the color specified in the documentation)  to discuss the first issue with our developers. We will update this ticket when we make any progress.
                                  As for the stroke attribute, you can assign one of six default DevExpress skin palette colors to automatically change color when a current palette is changed.
                                  I would like to note that the AllowGlyphSkinning option affects raster and vector images. However, this option was designed for raster images only. At the same time, vector images have own mechanism to change the hue based on the selected palette. So, I do not recommend you use this option for vector images.

                                • Ben Ernest-Jones 12.10.2018

                                  To your comment: "As for the stroke attribute, you can assign one of six default DevExpress skin palette colors to automatically change color when a current palette is changed."

                                  Thank you for pointing out that stroke colors also adhere to changing with the default palette when it is set to one of the six default skin palette colors, I tested this and confirmed it to be the case. Though I believe from previous comments that your statement isn't exactly correct? It sounds like those six default colors do not change "when a current palette is changed" as you indicated in your comment. They will just always use the colors of the "default palette" (thus my comment above indicating that I don't see how it makes sense to mix the default palette with a different active palette).

                                  Thank you for being so patient with the level of detail of my questions... I need to understand exactly how to design our vector graphics, and what rules they will follow for the changes a user might make to the selected palette, but once I know the rules, it's easy to design within those parameters. Overall, being in the process of moving from v2014.2 to v2018.2 I am very impressed with the latest library updates and our application is going to look 1000X better than before.

                                • Nadezhda (DevExpress Support) 12.11.2018

                                  Thank you for the feedback about our new function. We appreciate your opinion and will improve our components further.
                                  As for the color change, I will reply to you in the The Red style color is different from the color specified in the documentation thread.

                                • Ben Ernest-Jones 12.11.2018

                                  Thanks! I think that clears up all of my questions.