vcl-404997-expresscrossplatformlibrary-high-dpi-and-graphics-glyphs-and-images-svg-image-support.md
The DPI-adaptive UI requires that controls automatically scale their icons in response to DPI changes. Icons should use all available pixels to avoid blurriness. We recommend that you use only SVG images as UI element glyphs because an SVG image ensures crisp render at any target resolution.
DevExpress VCL Controls use the TcxImageList component and Smart Image/Smart Glyph containers to work with SVG images. These containers use the SVG Viewport dimensions as the base size to scale images.
The Icon Library ships with categorized SVG icons you can find in the DevAV and SVG Images collections:
The TdxSVGImageCodec class implements the Scalable Vector Graphics (SVG) image format in DevExpress products. This format implementation supports the following SVG elements and attributes:
classThe name of a CSS class defined in the CSS section of an SVG file.
idAn SVG element’s ID.
fillAn SVG element’s background color.fill-ruleAn additional rule that determines how the fill attribute affects a shape SVG element.fill-opacityAn opacity of a color, pattern, or gradient used to fill a shape.
opacityA floating-point value in the range between 0.0 (completely transparent) and 1.0 (opaque).
strokeAn SVG element’s outline.stroke-dasharrayA pattern of dashes and gaps used to display paths and SVG element outlines.stroke-dashoffsetAn offset for the pattern that the stroke-dasharray attribute defines.stroke-linecapA shape (butt, round, or square) of outlines applied to end points of open lines and paths.stroke-linejoinA shape (arcs, bevel, miter, miter-clip, or round) of stroked path corners.stroke-miterlimitA limit on the ratio of the miter length and the stroke-width attribute value used to draw a miter join. If this limit is exceeded, the join is drawn as a bevel join rather than a miter join.stroke-opacityAn opacity of a color, pattern, or gradient applied to a shape’s outline.stroke-widthAn SVG element’s outline color.styleAn SVG element’s style information. This attribute works identically to the style attribute in HTML. SVG images use CSS as a style sheet language.
transformDefines a custom (user) coordinate system for the SVG engine. You can use the following commands specific to the transform attribute: matrix, rotate, scale, skewX, skewY, and translate.
circleA circle based on a center point (cx and cy floating-point coordinates) and a radius (r). This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.clipPathA clipping path. The clip-path attribute references a clipping path. The path can contain the following SVG elements: path, text, use, or a basic shape.
ellipseAn axis-aligned ellipse based on a center point (cx and cy) and two radiuses (rx and ry). This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.
gA container element designed to group SVG elements (with support for nested groups).
imageA custom bitmap inserted into an SVG image. This element supports the following bitmap-specific attributes: x, y, width, height, and href (xlink:href). The href attribute supports only inline bitmaps. The SVG engine ignores external bitmaps.
lineA line segment with the specified start (x1 and y1) and end (x2 and y2) points. This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.linearGradient
A linear gradient that fills a shape. DevExpress Smart Image containers support only four linear gradient directions in SVG images: horizontal, vertical, forward diagonal, and backward diagonal.
The SVG engine selects the most suitable supported vector direction when it displays an image with an unsupported gradient direction. This element supports the gradientTransform attribute.
path
A path that consists of custom straight and curved lines (including cubic and quadratic Bezier lines). This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.
The path element accepts a path data command line as the d attribute. The DevExpress SVG engine supports the clip-rule attribute as well as all path data commands described in the SVG standard specification (v1.1).
patternA graphics object that can be redrawn at repeated x- and y-coordinate intervals (tiled) to cover an area. This object supports the following pattern-specific attributes: x, y, width, height, viewBox, patternUnits, and patternTransform.polygon
A custom closed shape created from interconnected straight line segments. This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.
The polygon element accepts a list of coordinates as the points attribute.
polyline
A set of connected straight line segments. This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.
The polyline element accepts a list of coordinates as the points attribute.
radialGradientA radial gradient used to fill a shape. This element supports the following attributes specific to radial gradients: cx, cy, r, fx, fy, fr, gradientTransform, and gradientUnits.rect
An axis-aligned rectangle. This element can include the shape-rendering attribute with the auto, optimizeSpeed, crispEdges, or geometricPrecision value.
x, y, height, and width attribute values define the rectangle’s origin and dimensions; you can use optional rx and ry attributes to round the angles.
stopA key point on a gradient direction vector. These points support the following attributes: offset, stop-color, and stop-opacity.
text
A text block within an SVG image. An SVG image can display text only within such text blocks. You can apply a supported linear gradient, pattern, or clipping path to text elements in an SVG image.
In addition to common attributes, the SVG engine supports the following attributes specific to the text element: x, y, dx, dy, font-family, font-size, font-weight, font-style, text-anchor, and text-decoration.
tspan
A text range within a text element or another tspan element. This SVG element allows you to apply different formatting to multiple ranges within the same text block.
In addition to common attributes, the current SVG engine version supports the following attributes specific to the tspan element: x, y, dx, and dy.
Note
Both text and tspan elements can include multiple X and Y coordinates that explicitly define individual glyph positions. If a glyph has no corresponding X or Y coordinate, the glyph position is calculated automatically based on the last glyph whose corresponding coordinate is defined explicitly.
useClones a referenced SVG element and places it at the specified position. The current SVG engine implementation supports only the following attributes that are specific to the use element: x, y, and href.
DevExpress controls can change their SVG icon colors based on the current skin and palette to maintain UI element contrast. All SVG icons shipped with the DevExpress Icon Library define the following named colors as CSS styles for fill and stroke attributes:
The following global settings specify if SVG glyphs for UI elements interact with the active vector skin palette:
TdxVisualRefinements.UseDisabledSkinPaletteForSVGSpecifies if UI elements apply the active vector skin palette to disabled state glyphs at the application level.TdxVisualRefinements.UseEnabledSkinPaletteForSVGSpecifies if UI elements apply the active vector skin palette to enabled state glyphs at the application level.
In addition, you can use the following properties to specify if individual SVG glyphs for UI elements interact with vector skin palettes:
TcxCustomImageList.UseDisabledSkinPaletteForSVGSpecifies if the active vector skin palette affects stored SVG glyphs for the disabled UI element state.TcxCustomImageList.UseEnabledSkinPaletteForSVGSpecifies if the active vector skin palette affects stored SVG glyphs for the enabled UI element state.TdxGPImage.UseDisabledSkinPaletteForSVGSpecifies if the active vector skin palette affects the stored SVG glyph for the disabled UI element state.TdxGPImage.UseEnabledSkinPaletteForSVGSpecifies if the active vector skin palette affects the stored SVG glyph for the enabled UI element state.
Palette interaction settings of individual glyphs and image lists have higher priority than corresponding global settings.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0py"
viewbox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css"> <!-- CSS Style Classes -->
.Green{fill:#039C23;} <!-- The class name followed by the 'fill' attribute and the corresponding hexadecimal color code -->
.Black{fill:#727272;}
.Red{fill:#D11C1C;}
.Yellow{fill:#FFB115;}
.Blue{fill:#1177D7;}
.White{fill:#FFFFFF;}
.st0{opacity:0.5;}
.st1{opacity:0.75;}
</style> <!-- End of the CSS styles declaration -->
<g id="ChartBubble"> <!-- The SVG geometry section. -->
<!-- Each line defines a circle filled with the color declared in the CSS class -->
<circle class="Yellow" cx="11" cy="21" r="7" />
<circle class="Blue" cx="23" cy="11" r="5"/>
<circle class="Green" cx="24" cy="22" r="2" />
<circle class="Red" cx="12" cy="6" r="4" />
</g> <!-- The end of the SVG geometry section. -->
</svg>
To allow the DevExpress Skin Engine to update element colors in third-party SVG icons, these icons must define and use the same colors. For detailed information on how to use third-party icons together with DevExpress skins in your application, refer to the following topic: Third-Party SVG Icon Adaptation for DevExpress Skins and Palettes.
The Office Image container in the Rich Edit control does not support SVG images to ensure compatibility with popular document formats.
See Also