Support for Vector Images

• Nov 23, 2021
• 4 minutes to read

The DPI-adaptive UI requires that DevExpress controls dynamically rasterize their images in response to DPI or size changes without quality losses. SVG images are designed for this task. They store only geometry and color information instead of individual pixels.

DevExpress VCL Controls use the TcxImageList component and the Smart Image/Smart Glyph containers to work with SVG images. These containers use the SVG Viewport dimensions as the “base” size to scale images.

SVG Images in the Icon Library

The Icon Library ships with categorized SVG icons you can find in the DevAV and SVG Images collections:

Common SVG Element Attributes

transform

Defines the 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.

id

An SVG element’s ID.

fill

An SVG element’s background color.

fill-rule

The additional rule that determines how the fill attribute affects a shape SVG element.

fill-opacity

An opacity of a color, pattern, or gradient used to fill a shape.

stroke-opacity

An opacity of a color, pattern, or gradient applied to a shape’s outline.

opacity

A floating-point value in the range between 0.0 (completely transparent) and 1.0 (opaque).

stroke

An SVG element’s outline width.

stroke-width

An SVG element’s outline color.

stroke-dasharray

A pattern of dashes and gaps used to display paths and SVG element outlines.

stroke-dashoffset

An offset for the pattern that the stroke-dasharray attribute defines.

class

The name of a CSS class defined in the CSS section of an SVG file.

style

An SVG element’s style information. This attribute works identically to the style attribute in HTML. SVG images use CSS as a style sheet language.

Supported SVG Elements and Element-Specific Attributes

g

A container element designed to group SVG elements (with support for nested groups).

circle

A circle based on a center point (specified by the cx and cy floating-point coordinates) and a radius (r).

ellipse

An axis-aligned ellipse based on a center point (cx and cy) and two radiuses (rx and ry).

line

A line segment with the specified start (x1 and y1) and end (x2 and y2) points.

rect

An axis-aligned rectangle. The x, y, height, and width attribute values define the rectangle’s origin and dimensions; you can use the optional rx and ry attributes to round the angles.

polyline

A set of connected straight line segments. This element accepts a list of coordinates as the points attribute.

polygon

A custom closed shape created from interconnected straight line segments. This element accepts a list of coordinates as the points attribute.

path

The path that consists of custom straight and curved lines (including cubic and quadratic Bezier lines). This SVG element accepts the “path data” command line as the d attribute. The DevExpress SVG engine supports all “path data” commands described in the SVG standard specification (v1.1).

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, and text-anchor.

use

Clones 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.

clipPath

A 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.

linearGradient

A linear gradient used to fill 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.

stop

A key point on a gradient direction vector. These points support the following attributes: offset, stop-color, and stop-opacity.

image

A 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 bitmap. The SVG engine ignores external bitmaps.

pattern

A 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.

radialGradient

A 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.

Limitations

The Office Image container does not support SVG images due to technical limitations of the Rich Edit control’s document import/export routines and certain document file formats.